How to change border color of checkbox after checked?

Question

I have a custom styled checkbox here 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>

.Is there any way to change checkbox border color into blue (like tick mark) after checking?

.custom-control.overflow-checkbox .overflow-control-input:checked{
    border: 3px solid #07C4C1;
 } 

Tried this, but not working.

Answer 1

You can do it by adding this code.

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

In the codepen, the checkbox overflow-control-input is set display: none , and the checkbox you can see is span element overflow-control-indicator .
You can change the style of the span element by ~ selector in css.
My code selects overflow-control-indicator when overflow-control-input is checked.

Codepen