选中后如何更改复选框的边框颜色？

Question

我这里有一个自定义样式的复选框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;
 }

试过了，但没用。

Answer 1

您可以通过添加此代码来完成。

.custom-control.overflow-checkbox .overflow-control-input:checked ~ .overflow-control-indicator {
  border-color: #07C4C1;
}

在codepen中，复选框overflow-control-input设置为display: none，可以看到的复选框是span元素overflow-control-indicator.
您可以通过 css.
中的 ~ 选择器更改 span 元素的样式我的代码在选中 overflow-control-input 时选择 overflow-control-indicator。

Codepen

选中后如何更改复选框的边框颜色？

How to change border color of checkbox after checked?

html

css

checkbox