单选按钮样式不会更改

Question

我正在尝试为单选按钮实现自定义样式。

我几乎已经实现了它，但问题是当我尝试点击其他单选按钮时它没有突出显示。

我很震惊，请帮帮忙。

.radio-radio-wrapper {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-radio-wrapper input[type='radio'] {
  display: none;
}

.radio-radio-wrapper label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
  cursor: pointer;
}

.radio-radio-wrapper input[type=radio]:checked+span>label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 4px;
  left: 4px;
  content: " ";
  display: block;
  background: #004c97;
}

<div _ngcontent-c9="" class="col-lg-12 radioBlock">
  <span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
            <input _ngcontent-c9="" id="radio1" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Capacity" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
            <span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio1">Capacity &amp; Partial Service</label></span>
  </span><span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
            <input _ngcontent-c9="" id="radio1" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Prod" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
            <span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio1">Full Network Service (No Capacity)</label></span>
  </span>
</div>

Answer 1

你忘记了唯一的id。 id都是radio1。您应该将其设置为 radio1 和 radio2 ，依此类推。

并且不要忘记标记for属性以链接到正确的input字段。见下文。

.radio-radio-wrapper {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-radio-wrapper input[type='radio'] {
  display: none;
}

.radio-radio-wrapper label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
  cursor: pointer;
}

.radio-radio-wrapper input[type=radio]:checked+span>label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 4px;
  left: 4px;
  content: " ";
  display: block;
  background: #004c97;
}

<div _ngcontent-c9="" class="col-lg-12 radioBlock">
  <span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
            <input _ngcontent-c9="" id="radio1" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Capacity" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
            <span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio1">Capacity &amp; Partial Service</label></span>
  </span><span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
            <input _ngcontent-c9="" id="radio2" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Prod" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
            <span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio2">Full Network Service (No Capacity)</label></span>
  </span>
</div>

Answer 2

以下是您快速参考的完美工作代码

＆＃13;

＆＃13;

.radio-radio-wrapper {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-radio-wrapper input[type='radio'] {
  display: none;
}

.radio-radio-wrapper label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
  cursor: pointer;
}

.radio-radio-wrapper input[type=radio]:checked+span>label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 11px;
  left: 12px;
  content: " ";
  display: block;
  background: #004c97;
}

＆＃13;

<div _ngcontent-c9="" class="col-lg-12 radioBlock">
  <span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
            <input _ngcontent-c9="" id="radio1" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Capacity" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
            <span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio1">Capacity &amp; Partial Service</label></span>
  </span><span _ngcontent-c9="" class="radio-radio-wrapper padding-radio">
            <input _ngcontent-c9="" id="radio2" name="radio" type="radio" ng-reflect-name="radio" ng-reflect-value="Prod" ng-reflect-model="Capacity" class="ng-untouched ng-pristine ng-valid">
            <span _ngcontent-c9="" class="radioLabel"><label _ngcontent-c9="" class="custom-control-description" for="radio2">Full Network Service (No Capacity)</label></span>
  </span>
</div>

＆＃13;

＆＃13;

＆＃13;