html - CSS 单选按钮和文本轮廓

Question

我在设置单选按钮周围的方框和阴影时遇到问题。我的 CSS 仅在单选按钮周围设置框，并在其周围显示讨厌的白色方框。如何在整个单选按钮+文本周围设置边框或轮廓，使选择更有特色。

enrgy-form {
  width: 50%;
  float: right;
}

.label-width {
  margin-left: 22px;
  white-space: nowrap;
}

.label-nowrapp {
  white-space: nowrap;
}

.selected-item input:checked {
  /*border: 1px solid dodgerblue;*/
  box-shadow: 3px 3px 11px 1px dodgerblue;
}

<div class="form-check enrgy-form">
  <label class="form-check-label label-nowrapp selected-item">
                <input class="form-check-input selected-item" type="radio" name="energy" formControlName="energy" value="Energy" (change)="setOptions()">Fuel-fired</label>
</div>

Answer 1

我认为你最好的选择是用 css 模拟单选按钮，这样你就可以拥有你想要的行为。

您应该首先将输入设置为 display: none 并在您的 HTML 中给它一个 id 以便您可以通过给标签一个 for 属性，这样您就可以控制标签中单选按钮的选中/取消选中。

接下来你想要模拟单选按钮的外观，我将通过添加两个 span 来实现，一个在另一个里面，这样我们就可以有一个选中/未选中的状态。

试试这个:

enrgy-form {
  width: 50%;
  float: right;
}

.label-width {
  margin-left: 22px;
  white-space: nowrap;
}

.label-nowrapp {
  white-space: nowrap;
}

.selected-item {
  display: none;
}

.selected-item:checked + label {
  box-shadow: 0px 0px 11px 2px dodgerblue;
}
label{
  padding: 3px;
}

label .bullet{
  border-radius: 50%;
  border: 1px solid gray;
  background-color: lightgray;
  margin-right: 3px;
  display: inline-block;
  width: 10px;
  height: 10px;
  position: relative;
}
.selected-item:checked + label .bullet .bullet-selected{
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: gray;
}

<div class="form-check enrgy-form">
  <input class="form-check-input selected-item" type="radio" name="energy" formControlName="energy" value="Energy" (change)="setOptions()" id="someUniqueId"/>
  <label class="form-check-label label-nowrapp" for="someUniqueId">
     <span class="bullet">
      <span class="bullet-selected"></span>
     </span>
     Fuel-fired
  </label>
</div>