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

Answer 2

Add value with empty string to the input:

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

Answer 3

instead of input type="submit" you can use input type="image"

use this one line code

<input type="image" src="submit.gif" alt="Submit" width="48" height="48">

see DEMO