css - Chrome 边框问题

Question

我只有 chrome 有这个问题。如何去除图像周围的边框？请查看 chrome 中的 fiddle 。

<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" /> , 所以 a src attribute is expected .你没有指定一个，所以 Chrome 显示灰色边框，以同样的方式 it does for an img 没有src属性。

如果你想坚持使用<input type="image" />并使用 CSS sprite，您将必须指定 something 作为 src ，例如 1x1 透明“blank.gif”。

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

然而，这看起来很可怕。相反，我建议切换到 <input type="submit" /> ，这solves the problem .