input的任何样式都会影响每个输入元素。有没有办法只为复选框指定样式，而不必为每个复选框元素应用类？
13个回答
63
我创建了自己的无标签解决方案
input[type=checkbox] {
position: relative;
cursor: pointer;
}
input[type=checkbox]:before {
content: "";
display: block;
position: absolute;
width: 16px;
height: 16px;
top: 0;
left: 0;
border: 2px solid #555555;
border-radius: 3px;
background-color: white;
}
input[type=checkbox]:checked:after {
content: "";
display: block;
width: 5px;
height: 10px;
border: solid black;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 2px;
left: 6px;
}<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">input[type=checkbox] {
position: relative;
cursor: pointer;
}
input[type=checkbox]:before {
content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
background-color:#e9e9e9;
}
input[type=checkbox]:checked:before {
content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
background-color:#1E80EF;
}
input[type=checkbox]:checked:after {
content: "";
display: block;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 2px;
left: 6px;
}<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">- Cenk YAGMUR
6
如何处理此图像中的灰色背景（https://i.stack.imgur.com/Q23fy.png），如果您可以查看我的帖子（https://pt.stackoverflow.com/questions/436890/estilizar-checkbox）。谢谢。 - Tiago
太棒了！你能把答案放在我的帖子里，让我标记为已完成吗？ - Tiago
2经过数小时的搜索和测试，这是唯一有效的方法。谢谢！ - Mark
2很棒的例子 - Adrian Grygutis
太好了，我会使用
position: relative;。 - Elijah Mock在Firefox中不起作用，也是。 - Hirschferkel
25
最近我发现一种用于样式化单选按钮和复选框的方法。以前，我必须使用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] 并将 border-radius:15px; 更改为 border-radius:4px;。
希望这对你有所帮助。
- Leo_V117
2
真的很好，可惜在Opera和IE上不太起作用 =( - Michel Ayres
1如果您想将自己的样式应用于复选框/输入框，请查看我的博客文章，了解如何通过CSS自定义输入元素。然后，您可以仅使用CSS对其进行任意样式设置，包括IE8回退。 - Felix Hagspiel
9
感谢所有为这篇文章做出贡献的人。
看看我仅仅使用纯CSS就能够实现什么。
input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 0px;
height: 0px;
}
input[type=checkbox]:checked:before {
content: "";
display: block;
position: absolute;
width: 34px;
height: 34px;
border: 4px solid #FFCB9A;
border-radius: 20px;
background-color: #445768;
transition: all 0.2s linear;
}
input[type=checkbox]:before {
content: "";
display: block;
position: absolute;
width: 34px;
height: 34px;
border: 4px solid #FFCB9A;
border-radius: 3px;
background-color: #445768;
}
input[type=checkbox]:after {
content: "";
display: block;
width: 0px;
height: 0px;
border: solid #FFCB9A;
border-width: 0 0px 0px 0;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
position: absolute;
top: 0px;
left: 50px;
transition: all 0.2s linear;
}
input[type=checkbox]:checked:after {
content: "";
display: block;
width: 12px;
height: 21px;
border: solid #FFCB9A;
border-width: 0 5px 5px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 2px;
left: 14px;
}<input type="checkbox">摘要
以下代码控制了我们通过添加 h:0 & w:0 隐藏的实际复选框。
input[type=checkbox] {...}
其余部分控制虚拟复选框。
这将控制虚拟复选框在被选中时的背景。
input[type=checkbox]:checked:before {...}
当复选框未选中时，此控件控制虚拟复选框的背景。
input[type=checkbox]:before {...}
当未被选中时，此控件控制虚拟复选框的前景。
input[type=checkbox]:after {...}
控制虚拟复选框被选中时的前景。
input[type=checkbox]:checked:after {...}
我真的希望它能像对我一样对你有帮助 :)
- Errorising
2
这个解决方案似乎只适用于基于Chromium的浏览器。在Firefox中，复选框仍然具有默认设计。
[JSFiddle]（https://jsfiddle.net/42oxtr3e/） - CodyKL
感谢您向我提出此事。 - Errorising
8
类同样也很有效，例如：
<style>
form input .checkbox
{
/* your checkbox styling */
}
</style>
<form>
<input class="checkbox" type="checkbox" />
</form>
- Jim Fell
4
将 .checkbox 嵌套在表单内可能并不必要，因为你很少会在表单外找到复选框。此外，input .checkbox 应该是 input.checkbox。 - Duncan Walker
@DuncanWalker 我还没有测试过，但是
form 标签不是必要的吗？这样才能将输入控件与默认提交控件绑定。 - Jim Fell1@Jim Fell，这个不起作用。如果我为两个不同样式的复选框创建两个不同的类，即.checkbox1 [input='checkbox']和.checkbox2[input='checkbox']，则样式始终会影响两者，如何确保样式是分开的？ - Krys
@Krys 你需要为你的复选框元素提供不同的类名。 - Jim Fell
4
input[type="checkbox"] {
/* your style */
}
但这仅适用于IE7及以下版本之外的浏览器，对于这些浏览器，您需要使用一个类（class）。
- cdm9002
1
在IE7以下的版本中，选择器可能会有问题。在这里进行了测试，并在IE7中没有问题。请见：http://kimblim.dk/css-tests/selectors/ - Frank N
4
Trident为复选框和单选按钮控件提供了::-ms-check伪元素。例如：
<input type="checkbox">
<input type="radio">
::-ms-check {
color: red;
background: black;
padding: 1em;
}
在Windows 8上的IE10中，显示如下所示：
- Anselm
3
虽然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类。
- Brian
1
感谢关于2个样式表的提示。虽然我试图避免那种情况，但我想我只会为复选框创建一个样式... - chicane
2
由于IE6不理解属性选择器，您可以使用条件注释结合jQuery或Dean Edwards的IE7.js(仅在IE6中可见的脚本)。
IE7(.js)是一个JavaScript库，可以使Microsoft Internet Explorer行为像符合标准的浏览器。它修复了许多HTML和CSS问题，并使透明PNG在IE5和IE6下正常工作。
使用类、jQuery或IE7.js的选择取决于您的喜好、需求（也许是整个网站都需要PNG-24透明度而无需依赖PNG-8，完全透明度会在IE6上回退到1位透明度 - 只能由Fireworks和pngnq创建等）。
- FelipeAls
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
outline而不是border。 - TylerH