You have to make it

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

If you want to keep using a standard submit button, that I personally agree with, you have to change your CSS to

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

There are other ways of doing the same thing:

• instead of setting border-style: none; you could set border-width: 0; (I think that even border: none; works across all browsers).

• using <input type='image'src='path_to_image.png' value='alt text' />, most likely to be better handled cross browser all the way back to Netscape 2. This will work the same as <input type='submit'>, only it also submits an x and y value of where the user clicked the button.

• using a <button> with the same style as the <input>

• using an image and javascript like <img src='path_to_img.png alt='alt text' onclick="window.getElementById('form_name').submit()"/>.

I personally dislike the last two. They are not wrong, but a user with javascript disabled might have problem. As a general rule, don't try to reimplement existing HTML semantics with javascript.