更新

Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用CSS中的:before和:after来设置整个单选按钮的样式。这样你甚至可以疯狂地使用动画和东西......

它还需要你改变HTML ... 如果您搜索“css custom radio”，可以找到很多例子。

[type="radio"]{
    position: absolute;
    left: -9999px;
}

[type="radio"] + label
{
    position: relative;
    padding: 0 20px;
    cursor: pointer;
}


[type="radio"] + label:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 14px;
    height: 14px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}

[type="radio"]:checked + label:before{
  box-shadow: 0px 1px 11px 1px dodgerblue;
}

[type="radio"] + label:after{
    content: '';
    display: none;
    width: 10px;
    height: 10px;
    background: gray;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 100%;
}


[type="radio"]:checked + label:after {
    display: block;
}

<div class="form-check enrgy-form">
  
    <input type="radio" name="energy" id="one">
    <label for="one">Fuel-fired</label>
    </input>

    <input type="radio" name="energy" id="two">
    <label for="two">Something else</label>
    </input>
</div>

Answer 2

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

您应首先将输入设置为display: none并在HTML中为其指定id，以便通过为标签指定for属性，将其与标签相关联，这样您可以通过标签控制选中/取消选中单选按钮。

接下来，您要模拟单选按钮的外观，我将通过添加两个跨度来完成此操作，一个在另一个内部，因此我们可以选中/取消选中状态。

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

更新

这是一个可能的解决方案，您可以根据需要进行修改！

.form-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
}

.form-check-label {
  font-size: 0.9em;
  margin-right: 0.25em;
  white-space: nowrap;
}

.form-check-input {
 margin: 0;
 margin-right: 0.5em;
}

.form-check-input:checked + .form-check-label:after {
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  border-radius: 1.5em 8px 8px 1.5em;
  box-shadow: 3px 3px 11px 1px dodgerblue;
}

.medium { font-size: 2rem; }
.medium input[type=radio] { zoom: 2 }

.big { font-size: 3rem; }
.big input[type=radio] { zoom: 3 }

<div class="form-check">
  <input id="inputcheck" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
  <label for="inputcheck" class="form-check-label">Fuel-fired normal</label>
</div>
<br><br>
<div class="form-check medium">
  <input id="inputcheck1" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
  <label for="inputcheck1" class="form-check-label">Fuel-fired medium</label>
</div>
<br><br>
<div class="form-check big">
  <input id="inputcheck2" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
  <label for="inputcheck2" class="form-check-label">Fuel-fired big</label>
</div>

CSS单选按钮和文本大纲

3 个答案:

更新