Chrome border problem

Question

I only have this problem in chrome. How to remove the border around the image? see the violin 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 are using <input type="image" /> , so a src is expected . . You did not specify one, so Chrome shows a gray border, just like for img without the src attribute.

If you want to use <input type="image" /> and using a CSS sprite, you will need to specify something like src , for example, transparent "blank.gif" 1x1.

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

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

Answer 2

replace it the same as sending type

 <input type="submit" class="searchbox_submit search_btn" value=""> 

fix css height and width

Answer 3

Give it a blank image as src using the data: URI. Since only Chrome bothers you, no problem:

 <input type="image" class="searchbox_submit search_btn" value="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII="> 

http://jsfiddle.net/TXYg6/23/

Answer 4

Chrome provides the graphics / outline for any image without src, you can set the input type to “submit” and that will disappear.

Alternatively, use src and start sending, but you can just use type = "submit"

unwanted chrome borders

Answer 5

Do you really need this type att = "image"? Because this thing is causing the problem ...

Answer 6

Semantically, I would say that use button , since you actually have no associated input value, and as such it is not an input:

 <button type="submit" class="searchbox_submit search_btn"></button> 

From the docs :

Buttons created with an element of a BUTTON element, like buttons created with an element of INPUT, but they offer a richer rendering of the possibility: a BUTTON element can have content. For example, a BUTTON element that contains an image function that resembles and resembles an INPUT element whose type is set to "image", but a BUTTON element that allows the content.

Greetings