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

【问题标题】：How to change border color of checkbox after checked?选中后如何更改复选框的边框颜色？
【发布时间】：2021-12-26 16:43:45
【问题描述】：

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

试过了，还是不行。

【问题讨论】：

以后请不要链接到小提琴。您甚至在发布之前收到警告，小提琴只允许与 coden-p 一起使用，但不能作为独立的。问题包含代码 msut 代码始终直接包含在问题本身中。如果指向小提琴的链接或内容发生变化，则该问题将没有进一步的价值。如果屏幕阅读器或搜索爬虫仅存在于外部，它们也将无法列出有用的信息。
对不起。如果有人想尝试更改代码，我认为这很容易。是的，你知道了:)

标签： html css checkbox

【解决方案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

【讨论】：

您能否为您的代码添加更多解释？
主要目标是在检查输入时选择span。 ~ 选择器选择相邻元素。
所以我的选择器在选中overflow-control-input 时选择了.overflow-control-indicator。
将此添加到不在 cmets 中的答案中；)
@Sfili_81，您可以查看我的答案。