CODEWITHSUNDEEP
jqueryhtmlcss
TanGio
TanGio

Reputation: 766

Add differents colors for radio button

I want to change the colors for the radio buttons but not result, So my html : 

/* RADIO */
.regular-radio {
  display: none;
}
.regular-radio + label {
  -webkit-appearance: none;
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 9px;
  border-radius: 50px;
  display: inline-block;
  position: relative;
}
.regular-radio:checked + label:after {
  content: ' ';
  width: 12px;
  height: 12px;
  border-radius: 50px;
  position: absolute;
  top: 3px;
  text-shadow: 0px;
  left: 3px;
  font-size: 32px;
}
.regular-radio:checked + label {
  background-color: #e9ecee;
  color: #99a1a7;
  border: 1px solid #adb8c0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.regular-radio + label:active,
.regular-radio:checked + label:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}
<div>
  <input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked />
  <label for="radio-1-1">Red</label>
  <input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" />
  <label for="radio-1-2">Yellow</label>
  <input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" />
  <label for="radio-1-3">Green</label>
</div>

So I want to add the color for radio depending on the : For example If I have the Red my radio button I want to get the color red, etc. Please help me. Thx in advance.

Upvotes: 0

Views: 60

Answers (1)

ketan
ketan

Reputation: 19341

Check below CSS: use for property for that.

/* RADIO */
.regular-radio {
  display: none;
}
.regular-radio + label {
  -webkit-appearance: none;
  
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 9px;
  border-radius: 50px;
  display: inline-block;
  position: relative;
}

input[type="radio"]:checked + label[for="radio-1-1"] {
    background-color: red;
}

input[type="radio"]:checked + label[for="radio-1-2"] {
    background-color: yellow;
}

input[type="radio"]:checked + label[for="radio-1-3"] {
    background-color: green;
}


.regular-radio:checked + label:after {
  content: ' ';
  width: 12px;
  height: 12px;
  border-radius: 50px;
  position: absolute;
  top: 3px;
  text-shadow: 0px;
  left: 3px;
  font-size: 32px;
}
.regular-radio:checked + label {
  background-color: #e9ecee;
  color: #99a1a7;
  border: 1px solid #adb8c0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.regular-radio + label:active,
.regular-radio:checked + label:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}
<div>
  <input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio redBtn" checked />
  <label for="radio-1-1">Red</label>
  <input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" />
  <label for="radio-1-2">Yellow</label>
  <input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" />
  <label for="radio-1-3">Green</label>
</div>

Upvotes: 2

Related Questions