Introduce image border in Safari and Chrome?

Question

I have an image submit button:

<input id="sbutton" type="image" value="&nbsp;" /> 

Stylized like this:

 #sbutton { text-indent: -99999px; border: 0; background-image: url('submit.png'); width: 201px; height: 37px; } 

It works fine in Opera in Firefox, the button size is about 10x10px , and in Safari and Chrome it has some weird border (like iframes have), and I have no idea how to get rid of this?

Thanks:)

Answer 1

Could this be a circuit? Set:

  #sbutton:active, #sbutton:focus { outline: none; } 

Try it.

Answer 2

Changed the type of image to send as I used the background image in CSS and this fixed my problem.

Answer 3

Try:

 border:none; 

but not:

 border:0; 

Answer 4

This is the right solution for this question:

 :active, :focus { outline: none; } 

Answer 5

Apparently this happens for image inputs without the src attribute. You can give it src, as in this post:

input type = "image" shows an unwanted border in Chrome and a broken link in IE7

OR, you can simply use an input of type = "submit" instead of type = "image" if you still set the background image.