更改收音机文本，同时保持标签标签中的输入和范围

Question

我正在制作收音机过滤器列表，以便在选择单选按钮时，它看起来像复选标记。我遇到的问题是，我无法更改单选按钮旁边的跨度文本的颜色。

我搜索在这里和计算器使用下面的推荐代码尝试：

input[type="radio"]:checked + .label-text { 
    color: blue; 
} 

这仍然没有改变，虽然文本。我试着移动标签外的单选按钮，但是复选标记的功能停止工作。 Here is a link to my codepen with my code

Answer 1

试试这个CSS

input[type="radio"]:checked ~ .label-text { 
    color: blue; 

}

+选择器用于直接选择一个同级元素， ~选择器用于选择前一个选择器之后的任何同级元素。

由于无线电元件和量程之间存在一个元素（<i class="fa fa-check"></i>），加号选择器无法匹配量程元素。

<label> 
    <input type="radio" name="radioGroup1" /> 
    <i class="fa fa-check"></i> 
    <span class="label-text">Label 1a</span> 
</label> 

Answer 2

尝试像这样

input[type="radio"]:checked + i+ .label-text { 

.main-body { 
 
    padding: 1em; 
 
    background-color: #f5f5f5; 
 
    color: #222222; 
 
    font-family: Lato, Helvetica, Arial, sans-serif; 
 
} 
 

 
.filters h5 { 
 
    font-family: "Roboto Condensed", "Arial Condensed", sans-serif; 
 
    text-transform: uppercase; 
 
    color: #222222; 
 
    font-weight: bold; 
 
    margin: 1rem 0 0 0; 
 
} 
 
.filters i { 
 
    margin-left: -1rem; 
 
    font-size: 1rem; 
 
} 
 

 
input[type="radio"]:checked + i + .label-text { 
 
    color: #7a4b83; 
 
    font-weight: bold; 
 
} 
 

 
label > input { 
 
    visibility: hidden; 
 
} 
 

 
label { 
 
    display: block; 
 
    line-height: 1.2rem; 
 
} 
 

 
input + i { 
 
    visibility: hidden; 
 
    color: #7a4b83; 
 
    margin-right: 0.2em; 
 
} 
 

 
input:checked + i { 
 
    visibility: visible; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
<link href='http://fonts.googleapis.com/css?family=Lato:400,600,300;Roboto+Condensed:400,700' rel='stylesheet' type='text/css'> 
 

 
<section class="main-body"> 
 
    <div class="filters"> 
 

 
    <h5>Group 1</h5> 
 
    <div class="checkRadioContainer1"> 
 
     <label> 
 
     <input type="radio" name="radioGroup1" /> 
 
     <i class="fa fa-check"></i> 
 
     <span class="label-text">Label 1a</span> 
 
     </label> 
 
     <label> 
 
     <input type="radio" name="radioGroup1" /> 
 
     <i class="fa fa-check"></i> 
 
     <span class="label-text">Lable 1b</span> 
 
     </label> 
 
      <label> 
 
     <input type="radio" name="radioGroup1" /> 
 
     <i class="fa fa-check"></i> 
 
     <span class="label-text">Lable 1c</span> 
 
     </label> 
 
      <label> 
 
     <input type="radio" name="radioGroup1" /> 
 
     <i class="fa fa-check"></i> 
 
     <span class="label-text">Lable 1d</span> 
 
     </label> 
 
    </div> 
 

 

 
    <h5>Group 2</h5> 
 
    <div class="checkRadioContainer2"> 
 
     <label> 
 
     <input type="radio" name="radioGroup2" /> 
 
     <i class="fa fa-check"></i> 
 
     <span class="label-text">Label 2a</span> 
 
     </label> 
 
     <label> 
 
     <input type="radio" name="radioGroup2" /> 
 
     <i class="fa fa-check"></i> 
 
     <span class="label-text">Label 2b</span> 
 
     </label> 
 
     <label> 
 
     <input type="radio" name="radioGroup2" /> 
 
     <i class="fa fa-check"></i> 
 
     <span class="label-text">Label 2c</span> 
 
     </label> 
 
     <label> 
 
     <input type="radio" name="radioGroup2" /> 
 
     <i class="fa fa-check"></i> 
 
     <span class="label-text">Label 2d</span> 
 
     </label> 
 
     <label> 
 
    </div> 
 
     
 
    <h5>Group 3</h5> 
 
    <div class="checkRadioContainer3"> 
 
     <label> 
 
     <input type="radio" name="radioGroup3" /> 
 
     <i class="fa fa-check"></i> 
 
     <span class="label-text">Label 3a</span> 
 
     </label> 
 
     <label> 
 
     <input type="radio" name="radioGroup3" /> 
 
     <i class="fa fa-check"></i> 
 
     <span class="label-text">Label 3b</span> 
 
     </label> 
 
     <label> 
 
     <input type="radio" name="radioGroup3" /> 
 
     <i class="fa fa-check"></i> 
 
     <span class="label-text">Label 3c</span> 
 
     </label> 
 
     <label> 
 
     <input type="radio" name="radioGroup3" /> 
 
     <i class="fa fa-check"></i> 
 
     <span class="label-text">Label 3d</span> 
 
     </label> 
 
    </div> 
 

 

 
    <h5>Group 4</h5> 
 
    <div class="checkRadioContainer4"> 
 
     <label> 
 
     <input type="radio" name="radioGroup4" /> 
 
     <i class="fa fa-check"></i> 
 
     <span class="label-text">Label 4a</span> 
 
     </label> 
 
     <label> 
 
     <input type="radio" name="radioGroup4" /> 
 
     <i class="fa fa-check"></i> 
 
     <span class="label-text">Label 4b</span> 
 
     </label> 
 
     <label> 
 
     <input type="radio" name="radioGroup4" /> 
 
     <i class="fa fa-check"></i> 
 
     <span class="label-text">Label 4c</span> 
 
     </label> 
 
     <label> 
 
     <input type="radio" name="radioGroup4" /> 
 
     <i class="fa fa-check"></i> 
 
     <span class="label-text">Label 4d</span> 
 
     </label> 
 
    </div> 
 
    </div> 
 
</section>