html - Adding an image to submit button using CSS

Question

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

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.

Answer 1

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