输入的任何样式都会影响每个输入元素。是否有一种方法可以指定样式只应用于复选框，而不对每个复选框元素应用类?
当前回答
你可以使用这个选择器将你的样式应用到复选框输入:
input[type='checkbox']{}
但不幸的是，它不支持自定义样式，所以你可以使用“after”和“before”来覆盖原始输入: 参见:演示
HTML
<input
type="checkbox"
style="background-color: #d81b60; color: #fff"
name="checkboxGreen"
/>
CSS
input[type='checkbox'] {
position: relative;
cursor: pointer;
margin: 20px;
}
input[type='checkbox']:before {
content: '';
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
background-color: inherit;
outline: 1px rgba(255, 255, 255, 0.2) solid;
transform: translate(-50%, -50%);
}
input[type='checkbox']:checked:before {
content: '';
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
background-color: inherit;
outline: 1px rgba(255, 255, 255, 0.2) solid;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 4px 1px #fff;
}
input[type='checkbox']:checked:after {
content: '';
display: block;
width: 6px;
height: 10px;
border: solid;
border-width: 0 2px 2px 0;
border-color: inherit;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
结果:
其他回答
你可以使用这个选择器将你的样式应用到复选框输入:
input[type='checkbox']{}
但不幸的是，它不支持自定义样式，所以你可以使用“after”和“before”来覆盖原始输入: 参见:演示
HTML
<input
type="checkbox"
style="background-color: #d81b60; color: #fff"
name="checkboxGreen"
/>
CSS
input[type='checkbox'] {
position: relative;
cursor: pointer;
margin: 20px;
}
input[type='checkbox']:before {
content: '';
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
background-color: inherit;
outline: 1px rgba(255, 255, 255, 0.2) solid;
transform: translate(-50%, -50%);
}
input[type='checkbox']:checked:before {
content: '';
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
background-color: inherit;
outline: 1px rgba(255, 255, 255, 0.2) solid;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 4px 1px #fff;
}
input[type='checkbox']:checked:after {
content: '';
display: block;
width: 6px;
height: 10px;
border: solid;
border-width: 0 2px 2px 0;
border-color: inherit;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
结果:
你可以通过以下方法应用到特定属性:
input[type="checkbox"] {...}
这里有解释。
Trident为复选框和单选按钮控件提供了::-ms-check伪元素。例如:
<input type="checkbox">
<input type="radio">
::-ms-check {
color: red;
background: black;
padding: 1em;
}
Windows 8操作系统的IE10界面显示如下:
我创造自己的解决方案，没有标签
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">
input[type="checkbox"] {
/* your style */
}
但这只适用于IE7及以下浏览器，对于那些你必须使用类的浏览器。
