CSS复选框输入样式

输入的任何样式都会影响每个输入元素。有没有一种方法可以指定只应用于复选框的样式，而不将类应用于每个复选框元素？
使用CSS 2，您可以执行以下操作：

input[type='checkbox'] { ... }

到目前为止，这应该得到相当广泛的支持
 通过执行以下操作，只能应用于某些属性：

input[type="checkbox"] {...}

它解释了这一点

但这只适用于IE7及以下版本之外的浏览器，对于那些必须使用类的浏览器。
尽管CSS确实为您提供了一种方法来实现特定于复选框类型或其他类型的样式，但不支持这种样式的浏览器将出现问题

我认为在这种情况下，您唯一的选择是将类应用于您的复选框

只需将class=“checkbox”添加到您的复选框中

然后在css代码中创建该样式

你可以做的一件事是：

main.css

input[type="checkbox"] { /* css code here */ }

ie.css

.checkbox{ /* css code here for ie */ }

然后使用特定于IE的css，包括：

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->



你仍然需要添加类才能在IE中工作，在其他不支持IE的非IE浏览器中也无法工作。但它会让你的网站在css代码的支持下向前思考，随着IE获得支持，您将能够从复选框中删除特定于ie的css代码和css类。
由于IE6不理解属性选择器，您可以将仅由IE6看到的脚本（带有条件注释）和jQuery或Dean Edwards的组合在一起

IE7（.js）是一个JavaScript库，使Microsoft Internet Explorer的行为类似于符合标准的浏览器。它修复了许多HTML和CSS问题，并使透明PNG在IE5和IE6下正常工作

使用classes、jQuery或IE7.js的选择取决于您的好恶和其他需求（可能整个站点都有PNG-24透明度，而不必依赖PNG-8，完全透明，在IE6上恢复为1位透明-仅由Fireworks和pngnq等创建）
类也可以正常工作，例如：

<style>
  form input .checkbox
  {
    /* your checkbox styling */
  }
</style>

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


表单输入。复选框
{
/*您的复选框样式*/
}
我最近发现了一些设计单选按钮和复选框样式的东西。以前，我不得不使用jQuery和其他东西。但这是愚蠢的简单

input[type=radio] {
    padding-left:5px;
    padding-right:5px;
    border-radius:15px;

    -webkit-appearance:button;

    border: double 2px #00F;

    background-color:#0b0095;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=radio]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

input[type=radio]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

您可以对复选框执行相同的操作，显然将
input[type=radio]
更改为
input[type=checkbox]
并更改
边框半径：15px至
边界半径：4px

希望这对您有所帮助。
Trident为复选框和单选按钮控件提供了
：-ms check
伪元素。例如：

<input type="checkbox">
<input type="radio">

::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}


：-ms检查{
颜色：红色；
背景：黑色；
填充：1em；
}

这在Windows 8上的IE10中显示如下：

我创建了自己的解决方案，没有标签


输入[类型=复选框]{
位置：相对位置；
光标：指针；
}
输入[类型=复选框]：在{
内容：“；
显示：块；
位置：绝对位置；
宽度：16px；
高度：16px；
排名：0；
左：0；
边框：2个实心#5555；
边界半径：3px；
背景色：白色；
}
输入[类型=复选框]：选中：之后{
内容：“；
显示：块；
宽度：5px；
高度：10px；
边框：纯黑；
边框宽度：0 2px 2px 0；
-webkit变换：旋转（45度）；
-ms变换：旋转（45度）；
变换：旋转（45度）；
位置：绝对位置；
顶部：2个；
左：6px；
}
感谢所有为本帖投稿的人。
看看我使用纯CSS能够完成什么


输入[类型=复选框]{
位置：绝对位置；
光标：指针；
宽度：0px；
高度：0px；
}
输入[类型=复选框]：选中：之前{
内容：“；
显示：块；
位置：绝对位置；
宽度：34px；
高度：34px；
边框：4px实心#FFCB9A；
边界半径：20px；
背景色：#445768；
过渡：所有0.2s线性；
}
输入[类型=复选框]：在{
内容：“；
显示：块；
位置：绝对位置；
宽度：34px；
高度：34px；
边框：4px实心#FFCB9A；
边界半径：3px；
背景色：#445768；
}
输入[类型=复选框]：在{
内容：“；
显示：块；
宽度：0px；
高度：0px；
边框：实心#FFCB9A；
边框宽度：0px 0px 0；
-webkit变换：旋转（180度）；
-ms变换：旋转（180度）；
变换：旋转（180度）；
位置：绝对位置；
顶部：0px；
左：50px；
过渡：所有0.2s线性；
}
输入[类型=复选框]：选中：之后{
内容：“；
显示：块；
宽度：12px；
高度：21px；
边框：实心#FFCB9A；
边框宽度：0 5px 5px 0；
-webkit变换：旋转（45度）；
-ms变换：旋转（45度）；
变换：旋转（45度）；
位置：绝对位置；
顶部：2个；
左：14px；
}
我相信IE 7和更高版本支持属性选择器，实际上是CSS 2.1@realtebo：注意，许多样式（边框、背景等）不能直接应用于HTML复选框。@RoyTinker您将使用
大纲
，而不是
边框
，作为复选框。感谢您提供关于2样式表的提示。虽然我试图避免这种事情，但我想我会为复选框创建一种样式，就是这样……在IE7下面，IE7本身可以使用选择器。测试并在此处查看：可能没有必要在表单中嵌套.checkbox，因为您不太可能在表单之外找到复选框。还应输入。应输入复选框。checkbox@DuncanWalker我还没有测试过它，但是将输入控件绑定到默认提交控件是否需要
表单
标记呢？@Jim认为这不起作用。如果我为两个不同样式的复选框创建了两个不同的类，即.checkbox1[input='checkbox']和.checkbox2[input='checkbox']，则这些样式将始终影响两个
<input type="checkbox">
<input type="radio">

::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}