CSS-单选按钮索引有问题答案

【问题标题】：CSS- Something is wrong with radio button indexesCSS-单选按钮索引有问题
【发布时间】：2020-04-27 17:14:19
【问题描述】：

单选按钮选择有点问题。我希望按钮选择能够正常工作，因为我没有做任何事情来篡改按钮的索引。我不知道为什么，但是，按下按钮前面的按钮被选中，而不是按下按钮本身。就好像按钮的索引都搞砸了。请运行下面的sn-p，看看你是否能指出我正确的方向。

.frame{
  background-color:#406bd8;
  display:flex;
  width:600px;
  justify-content:center;
  align-items:center;
  height:200px;
  margin:0 auto;
}

.radio-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0;
  width:40%
}

.label{
  display:inline-block;
  border:1px solid #eee;
  padding:1em;
  border-radius:100%;
  width:1em;
  height:1em;
  text-align:center;
  cursor:pointer;
  color:#eee;
  position:relative;
  z-index:1;
}
.label:hover{
  background-color:#658ae8;
}
.label:before{
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  background-color:#eee;
  border-radius:inherit;
  top:0;
  left:0;
  transform:scale(0);
  transition:transform .5s ease-in-out;
  transition-origin:center;
  z-index:-1;
}

.number{
  opacity:0;
  position:fixed;
  width:0;
}


.number:checked+.label{
  color:#406bd8;
}

.number:checked+.label:before{
  transform:scale(1);
}

  
  <div class="frame">
    <div class="radio-bar">  
 
<label for='input1' class='label'>1</label>
<input type='radio' name='radios' id='input1' class="number" checked>
    
<label for='input2' class='label'> 2</label>
 <input type='radio' name='radios' id='input2' class="number">
  
<label for="input3" class='label'>3</label>
<input type='radio' name='radios' id='input3'class="number">
  
<label for="input4" class='label'>4</label>
<input type='radio' name='radios' id='input4'class="number">

    </div>
  </div>

【问题讨论】：

.number:checked+.label 将在检查输入之后立即选择标签。只需重新排列元素，使标签位于 HTML 中的输入之后。
像魅力一样工作！！非常感谢伙计。如果您可以将其添加为答案，那就太好了！

标签： html css radio-button css-transitions

【解决方案1】：

因为你的选择器.number: checked + .label 在您的 html 代码中，输入在标签之后，但在您的 css 中，您要求相反

<div class="frame">
    <div class="radio-bar">  
        <input type='radio' name='radios' id='input1' class="number" checked>
        <label for='input1' class='label'>1</label>

        <input type='radio' name='radios' id='input2' class="number">
        <label for='input2' class='label'> 2</label>
    </div>
</div>

【讨论】：

【解决方案2】：

adjacent sibling combinator (+) 只会选择紧接在第一个元素之后的同级元素。

要解决您的问题，请重新排列元素的顺序，使输入位于标签之前：

.frame{
  background-color:#406bd8;
  display:flex;
  width:600px;
  justify-content:center;
  align-items:center;
  height:200px;
  margin:0 auto;
}

.radio-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0;
  width:40%
}

.label{
  display:inline-block;
  border:1px solid #eee;
  padding:1em;
  border-radius:100%;
  width:1em;
  height:1em;
  text-align:center;
  cursor:pointer;
  color:#eee;
  position:relative;
  z-index:1;
}
.label:hover{
  background-color:#658ae8;
}
.label:before{
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  background-color:#eee;
  border-radius:inherit;
  top:0;
  left:0;
  transform:scale(0);
  transition:transform .5s ease-in-out;
  transition-origin:center;
  z-index:-1;
}

.number{
  opacity:0;
  position:fixed;
  width:0;
}


.number:checked+.label{
  color:#406bd8;
}

.number:checked+.label:before{
  transform:scale(1);
}

<div class="frame">
    <div class="radio-bar">  
 
    <input type='radio' name='radios' id='input1' class="number" checked>
    <label for='input1' class='label'>1</label>

     <input type='radio' name='radios' id='input2' class="number">
    <label for='input2' class='label'> 2</label>

    <input type='radio' name='radios' id='input3'class="number">
    <label for="input3" class='label'>3</label>

    <input type='radio' name='radios' id='input4'class="number">
    <label for="input4" class='label'>4</label>

    </div>
  </div>

【讨论】：