chrome border issue
border, css, google-chrome
Solution
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.
Problem
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/