Question

HTML：

<input type="image" />

的CSS：

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

我不想使用src =＆＃34; img url＆＃34;，我想使用背景：（url）我已经添加了border：0但是仍然是chrome的边框

JSFiddle＆gt; http://jsfiddle.net/akash4pj/PYKfr/1/

Answer 1

向src属性添加1x1 GIF将解决问题：

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

JSFiddle

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

Answer 2

使用以下CSS属性：

border:0px;

或

border:none;

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

Answer 3

试试这个：

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

Answer 4

border：none属性应该修复它：

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

Answer 5

你正在使用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/

Answer 6

有时在Chrome中将缩放调整为大于或小于100％时，图像上会出现边框。您可能没有注意到Zoom已经调整过了。它有点远，但如果你的CSS是正确的，那可能就是它。

input type =“image”在Chrome中显示不需要的边框

6 个答案:

JSFiddle