Question

当我为提交按钮应用图片时，它显示为

http://www.flickr.com/photos/41695354@N08/4106014382/

如何将图片应用于提交按钮帮助。

我的代码：

HTML

<input type="submit" class="search_icon" value="" />

CSS

 .search_icon
 {

  background-image:url(../images/search_ic.png);
  width:32px;
  height:32px;
 }

Answer 1

您可以使用input type image。或者使用以下方法删除输入元素的边框和背景：

.search_icon
{
    background-image:url(../images/search_ic.png);
    width:32px;
    height:32px;
    border-width: 0;
    background-color: transparent;
}

Answer 2

试试这个，它是一个输入类型，它创建和提交表单的图像按钮，它应该完成工作。您还可以使用“值”指定替代文本。您可能还需要修改图像路径，我不知道您的css文件相对于HTML的位置。

<input src="images/search_ic.png" style="width: 32px; height: 32px;" type="image" value="Submit Form!">

Answer 3

如果您想继续使用我个人认同的标准提交按钮，您必须将CSS更改为

.search_icon
 {

  background-image:url(../images/search_ic.png);
  background-color: transparent;
  width:32px;
  height:32px;
  border-style: none;
 }

还有其他方法可以做同样的事情：

而不是设置border-style: none;，您可以设置border-width: 0;（我认为即使border: none;也适用于所有浏览器。）
使用<input type='image'src='path_to_image.png' value='alt text' />，最有可能通过浏览器更好地处理回Netscape 2.这与<input type='submit'>的工作方式相同，只提交x }和y用户点击按钮的位置值。
使用与<button>相同的<input>
使用图片和<img src='path_to_img.png alt='alt text' onclick="window.getElementById('form_name').submit()"/>之类的javascript。

我个人不喜欢最后两个。它们不是错误，但禁用javascript的用户可能会遇到问题。作为一般规则，不要尝试使用javascript重新实现现有的HTML语义。

Answer 4

请勿使用<input type="submit">。如果您希望在不同浏览器上显示更多或更少的一致性，请使用<button>。然后，您可以将margin，padding，border设置为零，并执行以下操作：

<button><img src="..." width="..." height=".." alt=".." /></button>

Answer 5

按钮类型如上所述在按钮标签之间提交图像，解决了需要。

<button id="login" type="submit" value="submit"> <img src="../images/login.gif" alt="Submit" width="62" height="32"/></button>

如何申请提交按钮的图片

5 个答案: