Html 如何删除复选框边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3544690/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I remove checkbox border?
提问by Erik
Is it possible to remove the borders around a checkbox so that it appears invisible? I have it placed in a DIV with a color background.
是否可以删除复选框周围的边框以使其不可见？我把它放在一个带有彩色背景的 DIV 中。
采纳答案by naikus
Unfortunately, its not possible to remove borders on browser native checkboxes (it will not work in all browsers), You will have to write your own checkbox-like state widget to implement this. Check out Nice formsif you want to style your regular form controls with custom styling
不幸的是，无法删除浏览器原生复选框上的边框（它不适用于所有浏览器），您必须编写自己的类似复选框的状态小部件来实现这一点。如果您想使用自定义样式设置常规表单控件的样式，请查看Nice 表单
回答by Greg McNulty
For FireFox: try border:none. For IE try: style="background:transparent;border:0"
对于 FireFox：尝试 border:none。对于 IE 尝试：style="background:transparent;border:0"
The other solution is to create your own images for checked and unchecked displaying the appropriate onclick of the image.
另一种解决方案是创建您自己的图像，用于选中和未选中显示图像的适当 onclick。
回答by dauber
I know this is a late answer, but a CSS expert I work with gave me this way to get rid of the border around a checkbox (and probably radio button) in IE10:
我知道这是一个迟到的答案，但是与我一起工作的 CSS 专家给了我这种方法来摆脱 IE10 中复选框（可能还有单选按钮）周围的边框：
- Set the border color to the same color as the page's background.
- Apply a box-shadow of "none" to it.
- 将边框颜色设置为与页面背景相同的颜色。
- 对其应用“无”框阴影。
That's it. Worked like a charm!
就是这样。像魅力一样工作！
回答by Petar
As this is the first result for me when searching for "remove checkbox border" in Google, let me mention that checkbox default styling could be removed in all browsers except IE (no shit...) with the appearanceproperty:
由于这是我在 Google 中搜索“删除复选框边框”时的第一个结果，让我提一下，可以在除 IE 之外的所有浏览器中删除复选框默认样式（没有狗屎......），具有以下appearance属性：
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
回答by Oluwatobi Omotayo
In CSS this is possible by setting the web kit appearance to none. Something like this
在 CSS 中，这可以通过将 web kit 外观设置为 none 来实现。像这样的东西
-webkit-appearance: none;
回答by tr4656
You would have to use some widget or a custom ui of some sort to remove the borders.
您将不得不使用一些小部件或某种自定义 ui 来删除边框。
I'm not sure if this works: <input type="checkbox" style="border: 0;" />
我不确定这是否有效： <input type="checkbox" style="border: 0;" />
回答by Gary
asp:checkbox is span element which contain input type=checkbox. You can setup style just for span. But if you want to change checkbox border inside the element you can use the javascript
asp:checkbox 是包含 input type=checkbox 的 span 元素。您可以仅为跨度设置样式。但是如果你想改变元素内的复选框边框，你可以使用 javascript
<body onload="javascript:OnLoad();" >
<script language="javascript" type="text/javascript">
<!--
function OnLoad() {
document.getElementById("<%=chBox.ClientID%>").style.border = "0px";
}
-->
</script>
<asp:CheckBox ID="chBox" runat="server" Text="Checkbox text" />
