CSS 复选框输入样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1120879/
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
CSS checkbox input styling
提问by Andrew Hare
Any style for inputaffects every input element. Is there a way to specify styling to apply for only checkboxes without applying a class to each check box element?
任何样式input都会影响每个输入元素。有没有办法指定样式只应用于复选框而不将类应用于每个复选框元素？
回答by Andrew Hare
With CSS 2 you can do this:
使用 CSS 2，您可以这样做：
input[type='checkbox'] { ... }
This should be pretty widely supported by now. See support for browsers
现在这应该得到相当广泛的支持。查看对浏览器的支持
回答by Cenk YAGMUR
I create my own solution without label
我创建了自己的没有标签的解决方案
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">回答by Leo_V117
Something I recently discovered for styling Radio Buttons AND Checkboxes. Before, I had to use jQuery and other things. But this is stupidly simple.
我最近发现的用于样式化单选按钮和复选框的东西。之前，我不得不使用 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;
}
You can do the same for a checkbox, obviously change the input[type=radio]to input[type=checkbox]and change border-radius:15px;to border-radius:4px;.
您可以对复选框执行相同操作，显然将 更改input[type=radio]为input[type=checkbox]并更改border-radius:15px;为border-radius:4px;。
Hope this is somewhat useful to you.
希望这对你有点用。
回答by Jim Fell
Classes also work well, such as:
类也运行良好，例如：
<style>
form input .checkbox
{
/* your checkbox styling */
}
</style>
<form>
<input class="checkbox" type="checkbox" />
</form>
回答by DeadHead
回答by cdm9002
input[type="checkbox"] {
/* your style */
}
But this will only work for browsers except IE7 and below, for those you will have to use a class.
但这仅适用于 IE7 及以下浏览器，对于那些您必须使用类的浏览器。
回答by Anselm
Tridentprovides the ::-ms-checkpseudo-element for checkbox and radio button controls. For example:
Trident::-ms-check为复选框和单选按钮控件提供了伪元素。例如：
<input type="checkbox">
<input type="radio">
::-ms-check {
color: red;
background: black;
padding: 1em;
}
This displays as follows in IE10 on Windows 8:
这在 Windows 8 上的 IE10 中显示如下：
回答by FelipeAls
As IE6 doesn't understand attribute selectors, you can combine a script only seen by IE6 (with conditional comments) and jQuery or IE7.jsby Dean Edwards.
由于 IE6 不理解属性选择器，您可以将仅 IE6 可见的脚本（带条件注释）和 jQuery 或IE7.js由 Dean Edwards 组合起来。
IE7(.js) is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
IE7(.js) 是一个 JavaScript 库，用于使 Microsoft Internet Explorer 表现得像符合标准的浏览器。它修复了许多 HTML 和 CSS 问题，并使透明 PNG 在 IE5 和 IE6 下正常工作。
The choice of using classes or jQuery or IE7.js depends on your likes and dislikes and your other needs (maybe PNG-24 transparency throughout your site without having to rely on PNG-8 with complete transparency that fallbacks to 1-bit transparency on IE6 - only created by Fireworks and pngnq, etc)
使用类或 jQuery 或 IE7.js 的选择取决于您的喜好和其他需求（也许整个网站的 PNG-24 透明度，而不必依赖具有完全透明度的 PNG-8，在 IE6 上回退到 1 位透明度- 仅由 Fireworks 和 pngnq 等创建）
回答by Brian
Although CSS does provide a way for you to do the style specific to the checkbox type or another type, there are going to be problems with browsers that do not support this.
尽管 CSS 确实为您提供了一种方式来处理特定于复选框类型或其他类型的样式，但不支持此功能的浏览器将会出现问题。
I think your only option in this case is going to be to apply classes to your checkboxes.
我认为在这种情况下您唯一的选择是将类应用于您的复选框。
just add the class="checkbox" to your checkboxes.
只需将 class="checkbox" 添加到您的复选框中。
Then create that style in your css code.
然后在您的 css 代码中创建该样式。
One thing you could do is this:
你可以做的一件事是：
main.css
主文件
input[type="checkbox"] { /* css code here */ }
ie.css
即.css
.checkbox{ /* css code here for ie */ }
Then use the IE specific css include:
然后使用 IE 特定的 css 包括：
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
You will still need to add the class for it to work in IE, and it will not work in other non-IE browsers that do not support IE. But it will make your website forward-thinking with css code and as IE gets support, you will be able to remove the ie specific css code and also the css classes from the checkboxes.
您仍然需要添加该类才能在 IE 中工作，并且在其他不支持 IE 的非 IE 浏览器中将无法工作。但这将使您的网站具有前瞻性的 css 代码，并且随着 IE 获得支持，您将能够从复选框中删除 ie 特定的 css 代码以及 css 类。
