change label color radio when checked

Question

im having problem on how to change the color of label text for the radio button to blue color after the radio is checked. I've followed many sample code but it wont work.

Below is my html code

<div class="input-group">
   <label for="pickup-1" class="radio-custom-label">10.00 PM</label>  
   <div class="text-group-field pickup-day choose-time">
     <input id="pickup-1" class="radio-custom input-group-field" name="radio-group" type="radio">
   </div>
</div>

Answer 1

You need to change your HTML structure a little bit & use ~ (General Sibling Combinator) selector, like:

.radio-custom:checked ~ label {
  color: blue;
}

Have a look at the snippet below:

.radio-custom:checked ~ label {
  color: blue;
}

label {
  display: block;
  flex: 1;
}

.input-group {
  display: block;
}

.text-group-field {
  padding: 10px;
}

.inner-block {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
}

<div class="input-group">
   <div class="text-group-field pickup-day choose-time">
     <div class="inner-block">
       <input id="pickup-1" class="radio-custom input-group-field" name="radio-group" type="radio">
       <label for="pickup-1" class="radio-custom-label">10.00 PM</label>
     </div>
   </div>
   <div class="text-group-field pickup-day choose-time">
     <div class="inner-block">
       <input id="pickup-2" class="radio-custom input-group-field" name="radio-group" type="radio">
       <label for="pickup-2" class="radio-custom-label">10.00 PM</label>
     </div>
   </div>
   <div class="text-group-field pickup-day choose-time">
     <div class="inner-block">
       <input id="pickup-3" class="radio-custom input-group-field" name="radio-group" type="radio">
       <label for="pickup-3" class="radio-custom-label">10.00 PM</label>
     </div>
   </div>
</div>

Hope this helps!

Answer 2

Hope this helps. Works for all radio buttons having class radio-custom. Sets blue color only to selected radio button label.

window.onload = function () {
	[].forEach.call(document.querySelectorAll(".radio-custom"), function (el) {
		el.addEventListener("click", function () {
			[].forEach.call(document.querySelectorAll(".radio-custom-label"), function(label){
				label.style.color = "black";
			});

			document.querySelector("label[for='" + this.id + "']").style.color = "blue";
		});
	});
}

<div class="input-group">
	<label for="pickup-1" class="radio-custom-label">10.00 PM</label>
	<div class="text-group-field pickup-day choose-time">
		<input id="pickup-1" class="radio-custom input-group-field" name="radio-group" type="radio">
	</div>
</div>

<div class="input-group">
	<label for="pickup-2" class="radio-custom-label">11.00 PM</label>
	<div class="text-group-field pickup-day choose-time">
		<input id="pickup-2" class="radio-custom input-group-field" name="radio-group" type="radio">
	</div>
</div>