Html 将复选框的输入样式重置为 IE 中的默认值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5353076/
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
Reset input style for checkboxes to default in IE
提问by alexteg
I have a CSS rule for input like this:
我有这样的输入的 CSS 规则：
input {
border: 1px solid black;
}
The problem is that checkboxes in IE (have tested on IE 8 and 9) and Opera also inherit this border and instead of showing the default style they show their custom mode for checkboxes with white background and black checks like this:
问题是 IE 中的复选框（已经在 IE 8 和 9 上测试过）和 Opera 也继承了这个边框，而不是显示默认样式，它们显示了具有白色背景和黑色复选框的自定义模式，如下所示：
instead of the native style, like in Windows 7 with gradient-grey background and dark blue checks that are shown in Chrome and Firefox:
而不是原生样式，就像在 Windows 7 中使用 Chrome 和 Firefox 中显示的渐变灰色背景和深蓝色检查：
I would like to keep the border for the input-rule in the CSS, but I have a class called "checkbox" that I put on all checkboxes like this:
我想在 CSS 中保留输入规则的边框，但我有一个名为“复选框”的类，我把它放在所有复选框上，如下所示：
<input type="checkbox" class="checkbox" />
Is there any way to reset the border style with the .checkbox rule?
有没有办法用 .checkbox 规则重置边框样式？
I have tried:
我试过了：
.checkbox {
border: none;
}
which works in Opera to revert to the default style, but not in IE. I have also tried many different combinations of:
它在 Opera 中可以恢复为默认样式，但在 IE 中无效。我还尝试了许多不同的组合：
.checkbox {
border: 1 none transparent;
}
but none of these seems to reset to the default style of the checkboxes in IE.
但这些似乎都没有重置为 IE 中复选框的默认样式。
Is it possible to revert the default style for checkboxes in IE do without removing the border for the input-rule and instead use the .checkbox class?
是否可以在不删除输入规则边框的情况下恢复 IE 中复选框的默认样式，而是使用 .checkbox 类？
回答by thirtydot
In many browsers, it's not possible to reset the checkbox back to the default native style.
在许多浏览器中，不可能将复选框重置回默认的原生样式。
This is probably the reason why CSS resets generally do not include a rule to this effect:
这可能是 CSS 重置通常不包含此效果的规则的原因：
input {
border: 0;
}
The most compatible technique is to do this:
最兼容的技术是这样做：
input[type="text"], input[type="password"] {
border: 1px solid black;
}
and explicitly list every typeof inputyou wish to style.
并明确列出您希望设计的每个type人input。
See: http://jsfiddle.net/EPpJ9/
This will work in IE7+ and all modern browsers.
这将适用于 IE7+ 和所有现代浏览器。
You could also do this more neatly with the not()CSS3 pseudo-class, but that doesn't work in IE8, which is a deal breaker for me:
你也可以用not()CSS3 伪类更巧妙地做到这一点，但这在 IE8 中不起作用，这对我来说是一个交易破坏者：
input:not([type="checkbox"]) {
border: 1px solid black;
}
回答by Danger14
Couldn't you include ie8-js to make IE8 recognize not() CSS3 pseudo-class?
你不能包含 ie8-js 来让 IE8 识别 not() CSS3 伪类吗？
http://code.google.com/p/ie7-js/
http://code.google.com/p/ie7-js/
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
回答by user2410570
In case you are still wondering there is indeed a way to style checkboxes and have it work in most browsers including IE. And you only need some css and just a little javascript and jquery. Works in IE6+
如果您仍然想知道确实有一种方法可以设置复选框样式并使其在包括 IE 在内的大多数浏览器中工作。而且你只需要一些 css 和一些 javascript 和 jquery。适用于 IE6+
First make your checkbox like this.. Only add a label element with the for element pointing to the id of the checkbox.
首先让你的复选框像这样..只添加一个标签元素，其中 for 元素指向复选框的 id。
<input id="mycheckbox" type="checkbox">
<label id="mylabel" for="mycheckbox"></label>
Next include some css:
接下来包括一些css：
#mycheckbox {
display: none;
}
Draw your checkbox using your label control, here is one I made:
使用标签控件绘制复选框，这是我制作的一个：
#mylabel {
float: left;
margin-top: 11px;
background-color: #fff;
border: 1px solid #000;
display: block;
height: 12px;
width: 12px;
margin-right: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
background-position: left center;
}
You have to create a look for when the box is checked:
当复选框被选中时，您必须创建一个查找：
#mylabel.checked {
background-color: #808080;
}
Finally some jquery:
最后一些jquery：
$(document).ready(function () {
$("#mycheckbox").change(function () {
if ($("#mycheckbox").is(":checked")) {
$("#mylabel").addClass("checked", "checked");
} else {
$("#mylabel").removeClass("checked");
}})
});
Don't forget to include the jquery libraries (put this in your head tag):
不要忘记包含 jquery 库（把它放在你的 head 标签中）：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Check out the fiddle to see it in action: fiddle
查看小提琴以查看它的实际效果： fiddle
