CODEWITHSUNDEEP
javascripthtmlcss
user3103783
user3103783

Reputation: 175

change label color radio when checked

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>

enter image description here

Upvotes: 8

Views: 17439

Answers (5)

Sonia Verma
Sonia Verma

Reputation: 81

input:checked + label{
    color: @grey !important;
    background-color: @white !important;
    border-color: @white !important;
}

Upvotes: 0

Rajan Benipuri
Rajan Benipuri

Reputation: 1832

A result much closer to your reference image.

check out here

<div class="input-group">


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

 <input id="pickup-2" class="radio-custom input-group-field" name="radio-group" type="radio">
 <label for="pickup-2" class="radio-custom-label">20.00 PM</label>

</div>

and the css

.input-group{
 background: #323447;
 padding: 10px;
 width: 100%;
 box-sizing: border-box;
 }

 input[type=radio]{
  display: none;
 }

.radio-custom-label{
 width: 200px;
 padding: 10px;
 display: block;
 background: rgba(255,255,255,0.1);
 color:#ddd;
 font-weight: 600;
 cursor: pointer;
 margin-bottom: 5px;
 }

 .radio-custom-label::after{
  width:15px;
  height: 15px;
  background: green;
  display: inline-block;
  content: "";
  position:relative;
  float: right;
  border-radius: 15px;
  display: none;
  }

  input[type=radio]:checked+.radio-custom-label::after{
  display: block;
  }

Upvotes: 0

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

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!

Upvotes: 11

Phani Kumar M
Phani Kumar M

Reputation: 4590

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>

Upvotes: 1

brk
brk

Reputation: 50291

Add change event to the radio button.On that event , get the label tag matches with the id of the radio. using document.querySelector , then add a css class to the element

document.getElementById('pickup-1').addEventListener('change', function() {
  document.querySelector('label[for="pickup-1"]').classList.add('colorText')
})
.colorText {
  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>

Upvotes: 0

Related Questions