更改收音機文本，同時保持標籤標籤中的輸入和範圍

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>