使用CSS添加图像以提交按钮 [英] Adding an image to submit button using CSS

问题描述

我正在尝试使用CSS为了使sumbit按钮包含一个图像。代码如下：

I'm attempting to use CSS in order to make a sumbit button containing an image. Here's the code:

HTML

<input type="submit" id="search" name="submit" alt="search" >

CSS

input#search{
    background:url(../search-icon.png);
    background-repeat: no-repeat;
    width:40px;
    height:40px;
}

这会返回此提交按钮，但我不想要submit

This returns this submit button, but I don't want the word 'submit' or the gray square box to appear.

如果任何人可以提出问题的可能性，将非常感激。

If anyone could suggest what the problem might be, it would be greatly appreciated.

推荐答案

灰色框是由将默认边框添加到提交按钮导致的。

The gray box is caused by a default border being added to the submit buttons. Whereas the submit text is the default value for the button.

HTML:

<input type="submit" id="search" name="submit" alt="search" value="">

CSS：

input#search    {
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
border: 0;
}

这篇关于使用CSS添加图像以提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！