输入类型=“图像”在 Chrome 中显示不需要的边框答案

【问题标题】：input type=“image” shows unwanted border in Chrome输入类型=“图像”在 Chrome 中显示不需要的边框
【发布时间】：2014-03-12 16:41:17
【问题描述】：

html:

<input type="image" />

css:

input[type="image"]
  {  border:0;
     border-color:transparent;
     background:transparent;
     width:150px;
     outline:none;
  }

我不想使用 src="img url"，我想使用背景:(url) 我添加了边框：0，但边框仍在 chrome 中出现

JSFiddle > http://jsfiddle.net/akash4pj/PYKfr/1/

【问题讨论】：

stackoverflow.com/questions/4108983/…
你能告诉我们jsfiddle吗？
先生。 gil 边界：没有一个不起作用
我查了一下，似乎边框是空占位符的指示符。当输入有图像时它会消失。我可能错了，但到目前为止，我是这么看的。
imtheman jsfiddle 添加

标签： html css

【解决方案1】：

在src 属性中添加 1x1 GIF 即可解决问题：

<input type="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />

JSFiddle

您可以在这里找到类似问题的答案：chrome border issue

【讨论】：

这在 Chrome 36 中对我有用。对我来说问题是我使用图像输入但使用 css 设置背景图像，因此 Chrome 会自动在输入周围放置一些正方形...边框和所有这并不能解决任何问题

【解决方案2】：

使用以下 CSS 属性：

border:0px;

或

border:none;

如果不起作用，请检查您的父标签，也许您的 div 或 span 容器设置了边框。

【讨论】：

【解决方案3】：

有时在 Chrome 中，当您将缩放调整为大于或小于 100% 时，图像上会出现边框。您可能没有注意到缩放已调整。这有点长镜头，但如果你的 CSS 是正确的，那可能就是它。

【讨论】：

【解决方案4】：

在您的代码{ 中，您使用了 2 次。您还必须将图像称为 CSS background 属性。

你可以这样使用。

input[type="image"]{
  border:0 none !important;
  outline:0 none !important;
  -webkit-border:0 none !important; 
  border-color:transparent;
  background:transparent;
  width:100px;
  height:25px;
  display: block;
  background: url("http://lorempixel.com/100/25")
}

这里是工作演示。 http://jsbin.com/kiherove/1/

【讨论】：

仍然有边框，但你的 img 隐藏了它
请添加这些行；它将强制保持边界 0 border:0 none !important; outline:0 !important;
如果添加Browser prefixes 会产生什么影响？ -webkit-border:0 none !important;
通过为 safari 和 chrome 添加供应商前缀是否有效？检查我上面的评论..

【解决方案5】：

边框：没有属性应该修复它：

input[type="image"]
{  
    border:none;
    border-color:transparent;
    background:transparent;
    width:150px;
    outline:none;
}

【讨论】：

【解决方案6】：

试试这个：

input[type="image"]
{
    border:0;
    border-color:transparent;
    background:transparent;
    width:150px;
    outline:none;
    border-style: none;
}

【讨论】：