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" />，因此a src attribute is expected。您尚未指定一个，因此Chrome会显示灰色边框，方式与it does for an img相同，但没有src属性。

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

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

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

Answer 2

将其替换为提交类型

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

更正你的css高度和宽度

Answer 3

使用src URI将其作为data:的空白图片。由于您只关心Chrome，因此没有问题：

<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为任何没有src的图片提供边框/轮廓图，您可以将输入类型设置为“提交”，这将消失。

或者，使用带有src并从中触发提交，但您也可以使用type =“submit”

unwanted chrome borders

Answer 5

你真的需要att type =“image”吗？因为那是导致问题的原因......

Answer 6

在语义上我会说使用button，因为你实际上没有相关的输入值，因此不是输入：

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

来自the docs：

使用BUTTON元素创建的按钮功能就像按钮一样使用INPUT元素创建，但它们提供更丰富的渲染可能性：BUTTON元素可能包含内容。例如，a 包含图像功能的BUTTON元素可能类似于一个INPUT元素，其类型设置为“image”，但是BUTTON元素类型允许内容。

干杯

镀铬边框问题

6 个答案: