Html 删除输入类型图像按钮的边框？_Html_Css

Html 删除输入类型图像按钮的边框？

html css

Html 删除输入类型图像按钮的边框？,html,css,Html,Css,以下是我目前掌握的代码： HTML: 上面的代码可以工作，但是按钮周围有一个边框，我想去掉它。到目前为止，我已经尝试添加背景边框：0，但它不起作用。试试看 input { /* sets border width to 0 and border style to none */ border:0 none; } 或要删除边框，请在CSS中显示边框的任何位置写入以下行： outline: 0; 通过将边框的宽度设置为0或样式设置为无，可以使用css删除边框要避免inter

以下是我目前掌握的代码：

HTML:

上面的代码可以工作，但是按钮周围有一个边框，我想去掉它。到目前为止，我已经尝试添加

背景边框：0，但它不起作用。
试试看
input {
    /* sets border width to 0 and border style to none */ 
    border:0 none;
}

或
要删除边框，请在CSS中显示边框的任何位置写入以下行：
outline: 0;

通过将边框的宽度设置为0或样式设置为无，可以使用css删除边框
要避免internet explorer遗留错误，必须指定边框宽度
或边框颜色
，以使边框样式：无
适用。因此，如果你关心我的奶奶，最好使用border:0 none
.btnimage {
    border: 0 none;
    width: 80px;
    height: 25px;
    background:url('C:/Users/John/Desktop/Misc Things for the CoD Ghosts Site/SubmitButton.png');
}


因为您没有提到边框何时可见，所以它可能是在输入焦点上可见的轮廓
如果是您的情况，请添加：
.btnimage:focus {
    outline:0
}

也试试前缀
input {

    border:0 none;
    -moz-border:0 none;   
    -webkit-border:0 none;  
     outline: 0;  //add this too
}

CSS
是工作
试试这个
input {
  border:0 none !important;
}

通过编写重要信息，它肯定会起作用。
这里的主要问题是您定义了一个输入type=“image”，但没有提供源，因此此边框就像一个断开的图像，因为当您将类型设置为图像时，输入也需要一个src属性
input {
  border:0 none !important;
  outline:0 !important;
}

我认为您有两种解决方案：
第一：在HTML代码中设置输入的“src”属性，如果您想更改悬停图像，可以通过javascript进行更改
<!DOCTYPE html>
...
<form>
    <input type="image" src="your_image_url" class="btnimage" />
</form>
...


...
...

第二：将其更改为输入类型“按钮”或链接“”，然后删除CSS中的边框和背景
<!DOCTYPE html>
...
<form>
    <input type="button" class="btnimage" />
</form>
...


...
...

示例：
1）使用src属性定义图像url
2） 将自定义按钮与div一起使用-类似于：
<div class="btnimage" onclick="blablabla()">Button</div>

按钮

它可以解决问题。
这终于对我起作用了。所有使用“边界”的尝试均无效：
input { outline: 0 !important; }

我也只是有点麻烦。
首先，如果您使用的是“image”输入类型，那么您可以将src设置为您想要使用的图像
这是我的：

然后在css中进行调整：
#fbshare input[type="image"] {outline:none;}
#fbshare input[type="image"]:active {outline:none;}

这解决了我在Chrome上的问题，我想它也应该解决你的问题。如果近两年后它仍然是一个问题。（我主要是为在谷歌搜索中找到这个页面的其他人发布的）
这一页帮助我得出了上述结论。
我遇到了与OP相同的问题-特别是对于图像输入。这显然是因为如果没有设置src
属性，浏览器会将其解释为“断开的图像”
因此，这是一个解决方案，通过将属性设置为单个透明像素，图像输入非边框非轮廓“边框”消失：
<input type="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="btnimage">



不需要CSS（或者似乎可以使用）。按钮边框在浏览器中使用大纲。这是默认值。Michelle你确定吗？大纲是围绕元素（边界外）绘制的一条线，以使元素“脱颖而出”。@AlienArrays，我不好意思编辑并删除您答案的第二部分。使用样式和颜色将边框宽度固定为0px并不能完全删除它。您应该建议“边界：0无；”是的，我肯定。我多次遇到这个问题。首先，你的图像本身有边界吗？另外，由于背景的url不是file://？@Milkywayspatterns是的，它可以工作，如果图像本身没有边框，您就有答案了。@Milkywayspatterns当我创建图像时，我没有在它们上加轮廓/边框，但是当我在按钮周围加边框时，它显示了我想要删除的轮廓和边框，因此我必须检查我的图像，看看轮廓/边框是否是图像的一部分。如果是的话，我会删除它，它应该会起作用。@Milkywayspatterns好吧，这不是我的图像……哎呀，Michelle，这是删除轮廓，而不是边框。轮廓是围绕元素（边框外）绘制的一条线，以使元素“突出”。按钮元素和输入元素使用轮廓作为默认值，而不是边框。如果OP实际需要指定没有边框，则将使用边框：0；非边界：0无；边界：0；只会完全消除边界。无需指定没有样式，请参阅以下答案：。我不会花更多时间为您提供更好的ie haslayout表单字段边界错误链接。但是你可以试一试。Bonne soirée.如果你们愿意，我会通过电子邮件向你们发送问题的截图，因为我认为没有人理解我的想法question@xNirdx如果我们没有人理解你的问题，也许是你的问题本身需要一个回顾。
<!DOCTYPE html>
...
<form>
    <input type="button" class="btnimage" />
</form>
...

<div class="btnimage" onclick="blablabla()">Button</div>

input { outline: 0 !important; }

#fbshare input[type="image"] {outline:none;}
#fbshare input[type="image"]:active {outline:none;}

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