如何用图像填写提交按钮？

Question

所以我有一个带有此代码的提交按钮：

<form method="post">
    <input name="submit" type="submit" class="icon" value=" "/>
</form>

我在CSS中有一个：

.icon{
    background-color:transparent;
    background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png);
    height:20px;
    width: 20px;
    background-position:center;
    border:none;
    cursor:pointer;
    background-size: 100%;
}

但问题是图像（h：40px和w：40px）不缩小以适应20px按钮......你们有没有解决方案？ （如果可能，我宁愿不使用javascript）

编辑： 正在工作。我只是删除了历史，现金和它的工作...... ty

Answer 1

试试这个： -

background-size:20px 20px;

Answer 2

使用image submit button代替，并使用CSS将元素缩小到所需的尺寸。

<input name="submit" type="image" class="icon"
style="width: 20px; height: 20px"
src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png"
alt="Send" />

Answer 3

为按钮添加ID，更新图像：

document.body.onclick=function(e){
    debugger;
    var bid=document.getElementById('bid');
    bid.style.backgroundImage="url('http://www.google.co.il/images/srpr/logo4w.png')";;
}

js fiddle here。

Answer 4

在css文件中添加以下行：

display:block;

Answer 5

您需要包含一个范围以提交按钮并设置其样式。

DEMO http://jsfiddle.net/H5dmd/2/

HTML

<form method="post">
    <span class="icon">
        <input name="submit" type="submit" value=" "/>
    </span>
</form>

CSS

input[type=submit]{
    background:transparent;
    width:20px;
    height:20px;
    border:none;
    padding:none;
    cursor:pointer;
}
.icon{
    float:left;
    background-color:transparent;
    background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png);
    height:20px;
    width: 20px;
    background-position:center;
    border:none;
    cursor:pointer;
    background-size: 100%;        
}

Answer 6

您可以简单地使用图像类型的输入，它完全存在于此目的：提交按钮显示图像。作为奖励，您还将获得用户点击的坐标。

示例：

<input name="mysubmit" type="image" src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png" />

Live test case

只有一个缺点：在处理表单的服务器端代码中，你必须检查“mysubmit.x”和/或“mysubmit.y”是否为空，以确定是否有任何发送的内容不太直观而不只是检查“mysubmit”。

Answer 7

我在这里看到多个选项：

更改保存

将图像保存到20x20，然后哎呀，问题就消失了。

使用CSS3

CSS3引入了一项新功能backgroud-size

把它放在你的CSS中：

background-size: 20px 20px;

但它与旧浏览器不兼容。

使用JavaScript [错误样式]

<强> HTML

<form method="POST" action="test.php" name="myform">
    <a onclick="javascript:document.forms['myform'].submit ();" ><img src="myimage.png" onclick="submit();" /></a>
</form>