How to apply picture for submit button

Question

When I apply picture for submit button, it appears like this

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

how to apply picture to a submit button help.

My code:

HTML

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

CSS

 .search_icon
 {

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

Answer 1

Try this, its an input type that creates and image button that submits the form, it should get the job done. You can also specify the alt text using "value". You might also have to modify the image path, I don't know where your css file was relative to your HTML.

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

Answer 2

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.

Answer 3

You could use the input type image. Or you remove the border and background of your input element with this:

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

Answer 4

Don't use <input type="submit">. Use <button>, if you want more or less consistent display over different browsers. You can then set margin, padding, border to zero, and do something like this:

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