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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

.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.

CodePudding user response：

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