单选按钮样式没有改变

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

这是供您快速参考的完美工作代码

.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;
}

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