[英]How to change border color of checkbox after checked?
我在这里有一个自定义样式的复选框https://codepen.io/Sreehariavikkal/pen/wvqQMEz
.custom-control.overflow-checkbox .overflow-control-input { display: none; } .custom-control.overflow-checkbox .overflow-control-input:checked~.overflow-control-indicator::after { -webkit-transform: rotateZ(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); transform: rotateZ(45deg) scale(1); top: -6px; left: 5px; } .custom-control.overflow-checkbox .overflow-control-input:checked~.overflow-control-indicator::before { opacity: 1; } .custom-control.overflow-checkbox .overflow-control-input:disabled~.overflow-control-indicator { opacity: .5; border: 2px solid #ccc; } .custom-control.overflow-checkbox .overflow-control-input:disabled~.overflow-control-indicator:after { border-bottom: 4px solid #ccc; border-right: 4px solid #ccc; } .custom-control.overflow-checkbox .overflow-control-indicator { border-radius: 3px; display: inline-block; position: absolute; top: 4px; left: 0; width: 16px; height: 16px; border: 3px solid #848484; } .custom-control.overflow-checkbox .overflow-control-indicator::after { content: ''; display: block; position: absolute; width: 16px; height: 16px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; -webkit-transform: rotateZ(90deg) scale(0); -ms-transform: rotate(90deg) scale(0); transform: rotateZ(90deg) scale(0); width: 10px; border-bottom: 4px solid #00909e; border-right: 4px solid #00909e; border-radius: 3px; top: -2px; left: 2px; } .custom-control.overflow-checkbox .overflow-control-indicator::before { content: ''; display: block; position: absolute; width: 16px; height: 16px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; width: 10px; border-right: 7px solid #fff; border-radius: 3px; -webkit-transform: rotateZ(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); transform: rotateZ(45deg) scale(1); top: -4px; left: 5px; opacity: 0; }
<label class="custom-control overflow-checkbox"> <input type="checkbox" class="overflow-control-input" checked=""> <span class="overflow-control-indicator"></span> </label>
.有没有办法在检查后将复选框边框颜色更改为蓝色(如刻度线)?
.custom-control.overflow-checkbox .overflow-control-input:checked{
border: 3px solid #07C4C1;
}
试过这个,但不起作用。
您可以通过添加此代码来实现。
.custom-control.overflow-checkbox .overflow-control-input:checked ~ .overflow-control-indicator {
border-color: #07C4C1;
}
在代码笔中,复选框overflow-control-input
设置为display: none
,您可以看到的复选框是 span element overflow-control-indicator
。
你可以通过css中的~
选择器来改变span元素的样式。
我的代码在检查overflow-control-input
时选择overflow-control-indicator
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.