CSS 边框颜色的css复选框样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41757006/
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 style for border color
提问by chamzz.dot
I have a check box in my table. this is css of that checkbox
我的表中有一个复选框。这是那个复选框的css
input[type="checkbox"] {
width: 20px;
height: 30px;
margin: auto;
display: table-row;
border: 5px solid red;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 4px;
margin-top: 1px;
}
but it shows normal checkbox. I want to change the border color of that checkbox. but it doesn't work!!!
但它显示正常的复选框。我想更改该复选框的边框颜色。但它不起作用！！！
回答by Jainam
You can put only below css for checkbox border and see Fiddle Demo
您只能在 css 下方放置复选框边框并查看Fiddle Demo
CSS:
CSS：
.error input[type=checkbox] {
outline: 2px solid #c00;
}
回答by poushy
I guess HTML does not allow adding border styles to check boxes. Try using the outline property instead.
我猜 HTML 不允许向复选框添加边框样式。尝试改用大纲属性。
回答by sansan
Try this customized the checkbox code:
试试这个定制的复选框代码：
/* Remove default checkbox */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
overflow: hidden;
padding-left: 35px;
cursor: pointer;
display: inline-block;
height: 25px;
line-height: 25px;
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
/* checkbox aspect */
[type="checkbox"] + label:before,
[type="checkbox"] + label:after {
content: '';
position: absolute;
left: 0;
z-index: 1;
-webkit-transition: .2s;
transition: .2s;
}
/* Unchecked styles */
[type="checkbox"]:not(:checked) + label:before {
top: 0px;
width: 19px; height: 19px;
border: 1px solid red;
}
[type="checkbox"]:not(:checked) + label:after {
top: 0px;
width: 19px; height: 19px;
border: 1px solid red;
z-index: 0;
}
/* Checked styles */
[type="checkbox"]:checked + label:before {
top: 2px;
width: 6px; height: 12px;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid red;
border-bottom: 1px solid red;
-webkit-transform: rotateZ(37deg);
transform: rotateZ(37deg);
-webkit-transform-origin: 20% 40%;
transform-origin: 100% 100%;
}
[type="checkbox"]:checked + label:after {
top: 0px;
width: 19px; height: 19px;
border: 1px solid red;
z-index: 0;
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
top: 0;
box-shadow: none;
background-color: #444;
width: 19px; height: 19px;
border: 3px solid #444;
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
[type="checkbox"]:disabled + label {
color: #555;
}
[type="checkbox"]:disabled:not(:checked) + label:hover:before {
border-color: red;
}<form action="#">
<p>
<input type="checkbox" id="test1" />
<label for="test1">Red</label>
</p>
<p>
<input type="checkbox" id="test2" checked="checked" />
<label for="test2">Yellow</label>
</p>
</form>