将IE的复选框的输入样式重置为默认值 [英] Reset input style for checkboxes to default in IE

问题描述

我有一个CSS规则输入如下：

I have a CSS rule for input like this:

input {
    border: 1px solid black;
}

<和Opera也继承这个边框，而不是显示默认样式，他们显示自定义模式的白色背景和黑色支票的复选框，如下：

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:

而不是本机样式，灰色背景和深蓝色检查：

instead of the native style, like in Windows 7 with gradient-grey background and dark blue checks that are shown in Chrome and Firefox:

我想在CSS中保留输入规则的边框，但我有一个名为checkbox的类在所有类似这样的复选框：

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:

<input type="checkbox" class="checkbox" />

有什么方法可以使用.checkbox规则重置边框样式？

Is there any way to reset the border style with the .checkbox rule?

我试过：

.checkbox {
    border: none;
}

可在Opera中恢复为默认样式，我也尝试过许多不同的组合：

which works in Opera to revert to the default style, but not in IE. I have also tried many different combinations of:

.checkbox {
    border: 1 none transparent;
}

，但这些似乎都不会重置为IE的复选框的默认样式。

but none of these seems to reset to the default style of the checkboxes in IE.

可以在不删除输入规则的边框的情况下恢复IE中的复选框的默认样式，而改为使用.checkbox类？

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?

推荐答案

在许多浏览器中，无法将复选框重置为默认的原生样式。

In many browsers, it's not possible to reset the checkbox back to the default native style.

这可能是为什么CSS重置通常不包括这样的规则的原因：

This is probably the reason why CSS resets generally do not include a rule to this effect:

input {
    border: 0;
}

最兼容的技术是：

input[type="text"], input[type="password"] {
    border: 1px solid black;
}

并明确列出每个类型

and explicitly list every type of input you wish to style.

请参阅： net / EPpJ9 /> http://jsfiddle.net/EPpJ9/

这将适用于IE7 +和所有现代浏览器。

This will work in IE7+ and all modern browsers.

您还可以使用 not（） CSS3伪类更加整洁，但是在IE8中不起作用，

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:

input:not([type="checkbox"]) {
    border: 1px solid black;
}

这篇关于将IE的复选框的输入样式重置为默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！