Question

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

我在这里搜索了stackoverflow并尝试使用以下建议代码：

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;

}

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

由于radio元素和span（<i class="fa fa-check"></i>）之间存在元素，因此plus选择器无法匹配span元素。

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

在保持输入和输入的同时更改广播文本跨标签标签

2 个答案: