css - chrome border issue

Question

I only have this problem in chrome. How remove the border around the image? please see the fiddle in chrome.

<form>
    <input type="image" class="searchbox_submit search_btn" value="">
</form>

form input[type=text]:focus, form input[type=password]:focus, textarea:focus {
    outline: none;
}

.search_btn {
    background: url("http://static.ak.fbcdn.net/rsrc.php/v1/yu/r/yo348KDuskF.png") no-repeat scroll 0px -200px transparent;
    height: 25px;
    width: 30px;
    outline: none;
    border: none;
    outline-width: 0;
    -webkit-appearance: none; 
}?

Demo: http://jsfiddle.net/TXYg6/

Answer 1

You're using <input type="image" />, so a src attribute is expected. You haven't specified one, so Chrome shows a grey border, in the same way it does for an img with no src attribute.

If you want to stick to using <input type="image" /> and using a CSS sprite, you're going to have to specify something as the src, such as a 1x1 transparent "blank.gif".

http://jsfiddle.net/thirtydot/TXYg6/14/

However, that just seems horrible. Instead, I recommend switching to <input type="submit" />, which solves the problem.