How to change border color when radio button is selected?

February 28, 2023

I am trying to change the label border color when the radio inside is selected

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif
}

body {
    height: 100vh;
    padding: 10px
}

.selectable {
    display: flex;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #ddd;
}

.selectable:active {
    border: 1px solid #0d6efd;
}

.selectable:hover {
    background: #20c997;
}

input[type='radio'] {
    width: 22px;
    height: 22px;
    margin-right: 10px;
}

input[type='radio']:before {
    content: '';
    display: block;
    width: 60%;
    height: 60%;
    margin: 20% auto;
    border-radius: 50%;
}

input[type="radio"]:checked:before {
    background: #20c997;
}

input[type="radio"]:checked {
    border-color: #20c997;
}

.selectable:checked {
    border: 1px solid #20c997;
}

<label class="selectable">
    <input type="radio" name="q1">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, impedit.</span>
</label>
<label class="selectable">
    <input type="radio" name="q1">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, impedit.</span>
</label>
<label class="selectable">
    <input type="radio" name="q1">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, impedit.</span>
</label>
<label class="selectable">
    <input type="radio" name="q1">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, impedit.</span>
</label>

I tried

.selectable:checked {
    border: #20c997;
}

and

input[type="radio"]:checked + label {
    border-color: #20c997;
}

more details more details more details more details more details more details more details more details more details more details more details more details more details more details more details more details more details more details more details more details more details more details more details more details

>Solution :

it can be done using css + selector, for this we need to put label and input as siblings and position:absolute to input and give padding-right to label

and give id to input and same to its corresponding label’s for attribute

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

body {
  height: 100vh;
  padding: 10px;
}

.selectable {
  display: flex;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #ddd;
}

.selectable:active {
  border: 1px solid #0d6efd;
}

.selectable:hover {
  background: #20c997;
}

input[type="radio"] {
  width: 22px;
  height: 22px;
  margin-right: 10px;
}

input[type="radio"]:before {
  content: "";
  display: block;
  width: 60%;
  height: 60%;
  margin: 20% auto;
  border-radius: 50%;
}

input[type="radio"]:checked:before {
  background: #20c997;
}


/* css here */
.custom-radio {
  position: relative;
}

/*position: absolute; to input */
.custom-radio input[type="radio"] {
  position: absolute;
  top: 9px;
  left: 12px;
}

/* padding-left to label */
.custom-radio label {
  padding-left: 42px;
}


/* css '+' selector */
input[type="radio"]:checked + label {
  border-color: #20c997;
}

<div class="custom-radio">
  <input type="radio" name="q1" id="one">
  <label class="selectable" for="one">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores</span>
  </label>
</div>
<div class="custom-radio">
  <input type="radio" name="q1" id="two">
  <label class="selectable" for="two">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores</span>
  </label>
</div>