4

我只在chrome中遇到这个问题。如何去除图像周围的边框？请看 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/

4

6 回答 6

10

您正在使用<input type="image" />，因此需要一个src属性。您还没有指定一个，因此 Chrome 显示一个灰色边框，与没有属性的情况img相同src。

如果你想坚持使用<input type="image" />和使用 CSS sprite，你将不得不指定一些东西，比如src1x1 透明的“blank.gif”。

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

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

于 2012-05-10T22:24:54.143 回答
2

用提交类型替换它

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

更正你的 CSS 高度和宽度

于 2012-05-10T22:31:45.380 回答
1

给它一个空白图像作为src使用data:URI。由于您只关心 Chrome，因此没有问题：

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

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

于 2012-05-10T22:28:20.163 回答
1

Chrome 为没有 src 的任何图像提供边框/轮廓，您可以将输入类型设置为“提交”，这将消失。

或者，使用带有 src 的 an 并由此触发提交，但您也可以只使用 type="submit"

不需要的镀铬边框

于 2012-05-10T22:28:53.070 回答
0

你真的需要那个att type="image"吗？因为这就是导致问题的原因...

于 2012-05-10T22:21:01.773 回答
0

从语义上讲，我会说使用 abutton因为您实际上没有关联的输入值，因此它不是输入：

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

从文档：

使用 BUTTON 元素创建的按钮功能与使用 INPUT 元素创建的按钮一样，但它们提供了更丰富的呈现可能性：BUTTON 元素可能具有内容。例如，包含图像的 BUTTON 元素的功能类似于并且可能类似于类型设置为“图像”的 INPUT 元素，但 BUTTON 元素类型允许内容。

干杯

于 2012-05-10T22:37:30.067 回答