镀铬边框问题

Question

我在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; 
}?

演示: http ://jsfiddle.net/TXYg6/

Answer 1

您正在使用<input type="image" />,因此需要一个src属性.您还没有指定一个,所以Chrome会显示一个灰色的边框,以同样的方式它对于一个img没有src属性.

如果你要坚持使用<input type="image" />,并使用CSS精灵,你将必须指定的东西的src,比如1x1大小的透明"blank.gif".

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

然而,这似乎很可怕.相反,我建议切换到<input type="submit" />,这解决了问题.