我正在尝试使用以下样式设置复选框：
<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />但是没有应用样式。复选框仍显示其默认样式。如何给它指定的样式？
如何使用CSS设置复选框样式
第1683篇《如何使用CSS设置复选框样式》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共19个回答
It seems you can change the colour of the checkbox in grayscale by using CSS only.
The following converts the checkboxes from black to gray (which was about what I wanted):
input[type="checkbox"] {
opacity: .5;
}
input[type=checkbox].css-checkbox {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
input[type=checkbox].css-checkbox + label.css-label {
padding-left: 20px;
height: 15px;
display: inline-block;
line-height: 15px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 15px;
vertical-align: middle;
cursor: pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -15px;
}
.css-label{
background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
}
这是最简单的方法，您可以选择要使用此样式的复选框。
CSS：
.check-box input {
display: none;
}
.check-box span:before {
content: ' ';
width: 20px;
height: 20px;
display: inline-block;
background: url("unchecked.png");
}
.check-box input:checked + span:before {
background: url("checked.png");
}
HTML：
<label class="check-box">
<input type="checkbox">
<span>Check box Text</span>
</label>
不需要JavaScript或jQuery。
更改复选框样式的简单方法。
input[type="checkbox"] {
display: none;
border: none !important;
box-shadow: none !important;
}
input[type="checkbox"] + label span {
background: url(http://imgh.us/uncheck.png);
width: 49px;
height: 49px;
display: inline-block;
vertical-align: middle;
}
input[type="checkbox"]:checked + label span {
background: url(http://imgh.us/check_2.png);
width: 49px;
height: 49px;
vertical-align: middle;
}<input type="checkbox" id="option" />
<label for="option"> <span></span> Click me </label>这是仅CSS / HTML的版本，完全不需要jQuery或JavaScript，简单干净的HTML以及真正简单简短的CSS。
这是JSFiddle
这是HTML：
<div id="myContainer">
<input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" />
<label for="myCheckbox_01_item" class="box"></label>
<label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label>
</div>
这是CSS
#myContainer {
outline: black dashed 1px;
width: 200px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] {
display: none;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box {
display: inline-block;
width: 25px;
height: 25px;
border: black solid 1px;
background: #FFF ;
margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box {
display: inline-block;
width: 25px;
height: 25px;
border: black solid 1px;
background: #F00;
margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
font: normal 12px arial;
display: inline-block;
line-height: 27px;
vertical-align: top;
margin: 5px 0px;
}
这可以被适配为能够具有单独的单选框或复选框，复选框组以及单选按钮组。
此html / css还可让您捕获标签上的点击，因此即使您仅单击标签，该复选框也将被选中和取消选中。
这种类型的复选框/单选按钮适用于任何形式，完全没有问题。也已经使用PHP，ASP.NET（.aspx），JavaServer Faces和ColdFusion进行了测试。
我认为最简单的方法是设置a的样式label并使其checkbox不可见。
的HTML
<input type="checkbox" id="first" />
<label for="first"> </label>
的CSS
checkbox {
display: none;
}
checkbox + label {
/* Style for checkbox normal */
width: 16px;
height: 16px;
}
checkbox::checked + label,
label.checked {
/* Style for checkbox checked */
}
的checkbox，即使它是隐藏的，仍然可以访问，并在提交表单时，它的价值将被发送。对于旧的浏览器，你可能需要更改类的label托运使用JavaScript，因为我不认为Internet Explorer中的旧版本理解::checked上checkbox。
您可以简单地appearance: none在现代浏览器上使用，以便没有默认样式，并且所有样式都可以正确应用：
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: 2em;
height: 2em;
border: 1px solid gray;
outline: none;
vertical-align: middle;
}
input[type=checkbox]:checked {
background-color: blue;
}
一个简单而轻巧的模板：
input[type=checkbox] {
cursor: pointer;
}
input[type=checkbox]:checked:before {
content: "\2713";
background: #fffed5;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 20px;
text-align: center;
line-height: 8px;
display: inline-block;
width: 13px;
height: 15px;
color: #00904f;
border: 1px solid #cdcdcd;
border-radius: 4px;
margin: -3px -3px;
text-indent: 1px;
}
input[type=checkbox]:before {
content: "\202A";
background: #ffffff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 20px;
text-align: center;
line-height: 8px;
display: inline-block;
width: 13px;
height: 15px;
color: #00904f;
border: 1px solid #cdcdcd;
border-radius: 4px;
margin: -3px -3px;
text-indent: 1px;
}<input type="checkbox" checked="checked">checked1<br>
<input type="checkbox">unchecked2<br>
<input type="checkbox" checked="checked" id="id1">
<label for="id1">checked2+label</label><br>
<label for="id2">unchecked2+label+rtl</label>
<input type="checkbox" id="id2">
<br>使用纯CSS3修改复选框样式，不需要任何JS＆HTML操作。
.form input[type="checkbox"]:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
content: "\f096";
opacity: 1 !important;
margin-top: -25px;
appearance: none;
background: #fff;
}
.form input[type="checkbox"]:checked:before {
content: "\f046";
}
.form input[type="checkbox"] {
font-size: 22px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form class="form">
<input type="checkbox" />
</form>从我的谷歌搜索来看，这是复选框样式的最简单方法。只需根据您的设计添加:after和:checked:afterCSS。
body{
background: #DDD;
}
span{
margin-left: 30px;
}
input[type=checkbox] {
cursor: pointer;
font-size: 17px;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
transform: scale(1.5);
}
input[type=checkbox]:after {
content: " ";
background-color: #fff;
display: inline-block;
color: #00BFF0;
width: 14px;
height: 19px;
visibility: visible;
border: 1px solid #FFF;
padding: 0 3px;
margin: 2px 0;
border-radius: 8px;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16);
}
input[type=checkbox]:checked:after {
content: "\2714";
display: unset;
font-weight: bold;
}<input type="checkbox"> <span>Select Text</span>这是一个简单的CSS解决方案，没有任何jQuery或JavaScript代码。
我正在使用FontAwseome图标，但可以使用任何图像
input[type=checkbox] {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
visibility: hidden;
font-size: 14px;
}
input[type=checkbox]:before {
content: @fa-var-square-o;
visibility: visible;
/*font-size: 12px;*/
}
input[type=checkbox]:checked:before {
content: @fa-var-check-square-o;
}
您可以避免添加额外的标记。通过设置CSS，除台式机版IE之外，此方法均适用（但适用于Windows Phone和Microsoft Edge的IE）appearance：
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Styling checkbox */
width: 16px;
height: 16px;
background-color: red;
}
input[type="checkbox"]:checked {
background-color: green;
}<input type="checkbox" />Simple to implement and easily customizable solution
After a lot of search and testing I got this solution which is simple to implement and easier to customize. In this solution:
- 您不需要外部库和文件
- 您无需在页面中添加额外的HTML
- 您不需要更改复选框名称和ID
只需将流动的CSS放在页面顶部，所有复选框的样式将如下更改：
input[type=checkbox] {
transform: scale(1.5);
}
input[type=checkbox] {
width: 30px;
height: 30px;
margin-right: 8px;
cursor: pointer;
font-size: 17px;
visibility: hidden;
}
input[type=checkbox]:after {
content: " ";
background-color: #fff;
display: inline-block;
margin-left: 10px;
padding-bottom: 5px;
color: #00BFF0;
width: 22px;
height: 25px;
visibility: visible;
border: 1px solid #00BFF0;
padding-left: 3px;
border-radius: 5px;
}
input[type=checkbox]:checked:after {
content: "\2714";
padding: -5px;
font-weight: bold;
}
最近，我找到了一个非常有趣的解决方案。
您可以appearance: none;用来关闭复选框的默认样式，然后像此处所述（示例4）在其上编写自己的样式。
input[type=checkbox] {
width: 23px;
height: 23px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin-right: 10px;
background-color: #878787;
outline: 0;
border: 0;
display: inline-block;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
input[type=checkbox]:focus {
outline: none;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
input[type=checkbox]:checked {
background-color: green;
text-align: center;
line-height: 15px;
}<input type="checkbox">不幸的是，对于该appearance选项，浏览器支持非常不利。根据我的个人测试，我只能使Opera和Chrome正常工作。但这是在获得更好支持或仅想使用Chrome / Opera时保持简单的方法。
使用纯CSS，不喜欢使用:before和:after，无需进行任何转换，您可以关闭默认外观，然后使用内联背景图像对其进行样式设置，如下例所示。此功能适用于Chrome，Firefox，Safari和现在的Edge（Chromium Edge）。
INPUT[type=checkbox]:focus
{
outline: 1px solid rgba(0, 0, 0, 0.2);
}
INPUT[type=checkbox]
{
background-color: #DDD;
border-radius: 2px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 17px;
height: 17px;
cursor: pointer;
position: relative;
top: 5px;
}
INPUT[type=checkbox]:checked
{
background-color: #409fd6;
background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}<form>
<label><input type="checkbox">I Agree To Terms & Conditions</label>
</form>我的解决方案
input[type="checkbox"] {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background: lightgray;
height: 16px;
width: 16px;
border: 1px solid white;
}
input[type="checkbox"]:checked {
background: #2aa1c0;
}
input[type="checkbox"]:hover {
filter: brightness(90%);
}
input[type="checkbox"]:disabled {
background: #e6e6e6;
opacity: 0.6;
pointer-events: none;
}
input[type="checkbox"]:after {
content: '';
position: relative;
left: 40%;
top: 20%;
width: 15%;
height: 40%;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
display: none;
}
input[type="checkbox"]:checked:after {
display: block;
}
input[type="checkbox"]:disabled:after {
border-color: #7b7b7b;
}<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>有一种方法可以仅使用CSS来实现。我们可以（ab）使用label元素并为该元素设置样式。需要注意的是，这不适用于Internet Explorer 8和更低版本。
.myCheckbox input {
position: relative;
z-index: -9999;
}
.myCheckbox span {
width: 20px;
height: 20px;
display: block;
background: url("link_to_image");
}
.myCheckbox input:checked + span {
background: url("link_to_another_image");
}<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
<input type="checkbox" name="test" />
<span></span>
</label>更新：
以下答案引用了CSS 3广泛使用之前的状态。在现代浏览器（包括Internet Explorer 9和更高版本）中，使用首选样式创建复选框替换更为简单，而无需使用JavaScript。
以下是一些有用的链接：
值得注意的是，基本问题没有改变。您仍然不能直接将样式（边框等）应用于复选框元素，并使这些样式影响HTML复选框的显示。但是，发生的变化是，现在可以隐藏实际的复选框，并用您自己的样式化元素替换它，仅使用CSS。特别是，由于CSS现在具有广泛支持的:checked选择器，因此您可以使其替换正确地反映该框的选中状态。
老年答案
这是有关样式复选框的有用文章。基本上，该作者发现，不同浏览器的浏览器差异很大，并且无论您如何设置其样式，许多浏览器始终显示默认复选框。因此，确实没有一个简单的方法。
不难想象有一种解决方法，您可以使用JavaScript在复选框上覆盖图像，并在该图像上单击以选中实际的复选框。没有JavaScript的用户将看到默认复选框。
编辑添加：这是一个很好的脚本，可以为您完成；它会隐藏实际的复选框元素，将其替换为样式化的跨度，然后重定向单击事件。
相似问题
问题类别
SCSS / SASS Implementation
A more modern approach
For those using SCSS (or easily converted to SASS), the following will be helpful. Effectively, make an element next to the checkbox, which is the one that you will style. When the checkbox is clicked, the CSS restyles the sister element (to your new, checked style). Code is below: