Need to change the border color of customised radio buttons during checked

Question

I have customized 2 radio buttons using bootstrap and want to achieve the below-expected behavior:

Initially, both the radio buttons have grey color and I want to change the border of the radio button to blue only for the button where I have checked. But in my case, it is not working as expected.

Screenshot for Reference

Below is my code.

.custom-radio-input {
     position: relative;
     z-index: 1;
     display: block;
     min-height: 1.5rem;
     padding-left: 1.5rem;
}
 .custom-radio-input .form-check-input {
     cursor: pointer;
}
 .custom-radio-input .form-check-input:before {
     content: " ";
     display: inline-block;
     position: relative;
     top: -1px;
     left: -1px;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     border: 1px solid grey;
     background-color: grey;
}
 .custom-radio-input .form-check-input:checked:after {
     border-radius: 50%;
     width: 12px;
     height: 12px;
     position: absolute;
     top: 3px;
     left: 3px;
     content: " ";
     display: block;
     background: red;
     border: 1px solid red;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <div class="custom-radio-input">
        <input class="form-check-input" type="radio" name="radiobutton">
    </div>
     <div class="custom-radio-input">
        <input class="form-check-input" type="radio" name="radiobutton">
    </div>

Please help

score 2 · Accepted Answer · answered May 19 '21 at 07:34

Instead of using another pseudoelement you could play with a background and a box-shadow

.custom-radio-input {
     position: relative;
     z-index: 1;
     display: block;
     min-height: 1.5rem;
     padding-left: 1.5rem;
}
 .custom-radio-input .form-check-input {
     cursor: pointer;
}
 .custom-radio-input .form-check-input::before {
     content: " ";
     display: inline-block;
     position: relative;
     top: -1px;
     left: -1px;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     border: 1px solid grey;
     background-color: grey;
}
 
.custom-radio-input .form-check-input:checked::before {
  
     background: blue;
     border: 2px blue solid;
     box-shadow: inset 0 0 0 2px #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <div class="custom-radio-input">
        <input class="form-check-input" type="radio" name="radiobutton">
    </div>
     <div class="custom-radio-input">
        <input class="form-check-input" type="radio" name="radiobutton">
    </div>

Ahmad Habib · Answer 2 · 2021-05-19T07:41:17.780

You just have to change the background when the radio button is checked.

.custom-radio-input {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
}

.custom-radio-input .form-check-input {
  cursor: pointer;
}

.custom-radio-input .form-check-input:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: -1px;
  left: -1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid grey;
  background-color: grey;
}

.custom-radio-input .form-check-input:checked:before {
  background-color: blue;
}

.custom-radio-input .form-check-input:checked:after {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 3px;
  left: 3px;
  content: " ";
  display: block;
  background: red;
  border: 2px solid #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<div class="custom-radio-input">
  <input class="form-check-input" type="radio" name="radiobutton">
</div>
<div class="custom-radio-input">
  <input class="form-check-input" type="radio" name="radiobutton">
</div>

Working fiddle

Need to change the border color of customised radio buttons during checked

2 Answers2