Submit image border in Safari and Chrome?

问题:

I have a submit image button:

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

Styled like that:

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

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

Thanks :)

回答1:

Could it be an outline? Set:

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

Try that out.

回答2:

Changed type from image to submit as I was using a background image in CSS and this fixed my issue.

回答3:

This is a right solution for this question:

:active, :focus { outline: none; }

回答4:

Apparently this happens for image inputs with no src attribute. You can give it an src, as in this post:

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

OR, you could just use a type="submit" input instead of type="image", if you're setting the background image anyway.

回答5:

Try:

border:none;

rather than:

border:0;