检查收音机时如何更改父标签的颜色[重复]答案

【问题标题】：How to change color of parent label when checking radio [duplicate]检查收音机时如何更改父标签的颜色[重复]
【发布时间】：2021-11-22 19:36:18
【问题描述】：

我想要的只是当我选中单选框或标签中的某处时，选中单选并且标签的背景颜色发生变化。

<div class="answer">
  <label for="answer-1" class="radio-label">
    <div class="answer-radio">
      <input type="radio" class="space" id="answer-1" name="answer-element" />
      <span for="answer-1">True</span>
    </div>
  </label>
  <label for="answer-2" class="radio-label">
    <div class="answer-radio">
      <input type="radio" class="space" id="answer-2" name="answer-element" />
      <span for="answer-2">False</span>
    </div>
  </label>
</div>

好像我还没有检查的时候，bg-color是蓝色的，当我检查的时候，bg-color是绿色的。

我的问题是如何在不使用 javascript（仅 html 和 css）的情况下对这个 进行 css 处理

【问题讨论】：

你不能使用css选择父母，你只能选择孩子，或者兄弟姐妹

标签： html css

【解决方案1】：

使用更少的编码和没有 JavaScript，您可以实现您正在寻找的内容，如下所示。

我使用+ css 选择器来选择兄弟label 而不是父级。我正在根据需要更改背景颜色。

如果您打算为整行/包括复选框应用背景颜色，您可以自定义标签/复选框，它也会按预期工作

label {
  display: inline-block;
  background-color: blue;
  padding: 10px;
  padding-left: 30px;
  width: 200px;
  cursor: pointer;
}

input:checked + label {
  background-color: green;
}

input {
  width: 0;
  height: 0;
  visibility: hidden;
  position: absolute;
}

.answer-radio {
  position: relative;
}

label::before,
label::after {
  content: "";
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  left: 5px;
  top: 10px;
}

label::before {
  width: 16px;
  height: 16px;
  border: 1px solid #ddd;
}

label::after {
  width: 10px;
  height: 10px;
  background-color: #ddd;
  left: 9px;
  top: 14px;
  display: none;
}

input:checked + label::after {
  display: inline-block;
}

<div class="answer">
  <div class="answer-radio">
    <input type="radio" class="space" id="answer-1" name="answer-element" />
    <label for="answer-1" class="radio-label">True</label>
  </div>
  <div class="answer-radio">
    <input type="radio" class="space" id="answer-2" name="answer-element" />
    <label for="answer-2" class="radio-label">False</label>
  </div>
</div>

【讨论】：

感谢您的支持。我做到了并且成功了:)

【解决方案2】：

检查输入时无法选择父元素，因此必须使用一些 javascript。虽然有这样做的替代方案。请在下面找到代码。

label{
  display:flex;
  }
  
  input:checked + .answer-radio{
  background-color:purple;
  }

  <label for="answer-1" class="radio-label">
  <input type="radio" class="space" id="answer-1" name="answer-element" />
    <div class="answer-radio">
      <span for="answer-1">True</span>
    </div>
  </label>

  <label for="answer-2" class="radio-label">
  <input type="radio" class="space" id="answer-1" name="answer-element" />
    <div class="answer-radio">
      <span for="answer-2">True</span>
    </div>
  </label>

【讨论】：

【解决方案3】：

不要在span 标签内标记您的单选按钮，而是使用您的label 标签来识别每个单选按钮。如果您重组 HTML 以使标签与单选按钮相邻，则可以使用 CSS adjacent sibling combinator 选择它们，并添加您的 CSS 属性：

input[type="radio"] + label {
  background-color:#add8e6;
}

input[type="radio"]:checked + label {
  background-color: #90ee90;
}

<div class="answer">

  <div class="answer-radio">
    <input type="radio" class="space" id="answer-1" name="answer-element" />
    <label for="answer-1" class="radio-label">True</label>
  </div>
  <div class="answer-radio">
    <input type="radio" class="space" id="answer-2" name="answer-element" />
    <label for="answer-2" class="radio-label">False</label>
  </div>
</div>

【讨论】：