jquery - 为单选按钮添加不同的颜色

Question

我想更改单选按钮的颜色但不是结果，所以我的 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>

所以我想根据以下内容为 radio 添加颜色:例如，如果我有红色我的单选按钮，我想要红色等。请帮助我。提前致谢。

Answer 1

检查下面的 CSS:为此使用 for 属性。

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