如何用图像填充提交按钮?

so I have a submit button with this code:

所以我有一个提交按钮，代码如下:

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

an in the CSS I have:

在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%;
}

But the problem is that the image ( that have h:40px and w:40px) does not shrink to fit the 20px button... Do you guys have any solution for this?? (I rather not use javascript if possible)

但问题是，图像(h:40px和w:40px)不会缩小以适应20px按钮……你们有什么办法吗?(如果可能的话，我宁愿不使用javascript)

EDIT: Currently working. I just delete history, cash and it works... ty

编辑:目前工作。我只要删除历史，现金，它就能工作……泰

7 个解决方案

#1

try this : -

试试这个:

background-size:20px 20px;

#2

Use an image submit button instead, and shrink the element to the desired dimensions using CSS.

使用图像提交按钮，并使用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" />

#3

add this line in css file:

在css文件中添加这一行:

display:block;

#4

You need to wrap a span to submit button and style it.

您需要打包一个span来提交按钮并对其进行样式化。

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

演示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%;        
}

#5

Add an id to the button, Updating the image:

向按钮添加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.

js小提琴。

#6

You can simply use input of type image, it exists for this purpose exactly: submit button showing an image. As a bonus you'll also get the coordinates where the user clicked.

您可以简单地使用输入的类型图像，它是为了这个目的而存在的:提交按钮显示一个图像。作为奖励，您还将获得用户单击的坐标。

Example:

例子:

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

Live test case.

测试用例。

Only one downside: in the server side code handling the form, you'll have to check if "mysubmit.x" and/or "mysubmit.y" are not empty to know if you got anything sent which is less intuitive than just checking "mysubmit".

只有一个缺点:在处理表单的服务器端代码中，您必须检查是否“mysubmit”。x”和/或“mysubmit。y“不是空的，不知道你是否收到了发送的任何东西，这比仅仅检查“mysubmit”要不那么直观。

#7

I see multiple options here :

我在这里看到了多种选择:

Change saving

Save your image to 20x20, and whoops, problem gone.

把图像保存到20x20，哎呀，问题解决了。

Use CSS3

CSS3 introduces a new feature that is backgroud-size

CSS3引入了一个新的特性，即背景大小

Just put that in your CSS :

把它放在你的CSS里:

background-size: 20px 20px;

But it won't be compatible with old browsers.

但它与旧的浏览器不兼容。

Use JavaScript [Bad style]

HTML

HTML

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