仅使用 CSS 更改所选答案的背景颜色

Question

我想在玩家点击答案框（选择它）时更改答案的颜色，如下图所示。

这是我的 html 代码，单选框是标签的子项。我尝试了一些命令，例如：

.choices > input[type="radio"]:checked {background: yellow;}

但似乎这不是真的。当我将 unchecked="checked" 放入单选框行时，有人请告诉我区别？

非常感谢大家！

 <!-- ---question1--- -->
              <div class="quest">
                <h1>Question 1 of 10</h1>
                <h5>Question 1</h5>
                <div class="group">
                  
                  <label for="opt1" class="choices">
                    <input type="radio" id="1" name="q1" value="o1" >Option 1<br>
                  </label>
                  <label for="opt2" class="choices">
                    <input type="radio" id="2" name="q1" value="o2" >Option 2<br>
                  </label>
                  <label for="opt3" class="choices">
                    <input type="radio" id="3" name="q1" value="o3" >Option 3<br>
                  </label>
                  <label for="opt4" class="choices">
                    <input type="radio" id="4" name="q1" value="o4" >Option 4<br>
                  </label>

                </div>
              </div>
              <!-- ---question2--- -->
              <div class="quest">
                <h1>Question 2 of 10</h1>
                <h5>Question 2</h5>
                <div class="group">
                  
                  <label for="opt1" class="choices">
                    <input type="radio" id="5" name="q2" value="o1" unchecked="checked">Option 1<br>
                  </label>
                  <label for="opt2" class="choices">
                    <input type="radio" id="6" name="q2" value="o2" unchecked="checked">Option 2<br>
                  </label>
                  <label for="opt3" class="choices">
                    <input type="radio" id="7" name="q2" value="o3" unchecked="checked">Option 3<br>
                  </label>
                  <label for="opt4" class="choices">
                    <input type="radio" id="8" name="q2" value="o4" unchecked="checked">Option 4<br>
                  </label>

              </div>
              </div>

Answer 1

已经有人指出，checked + label 是一种可能的解决方案。这是示例，但有所缩短。

input[type="radio"]:checked + label {
  background: yellow;
}

 <!-- ---question1--- -->
<div class="quest">
  <h1>Question 1 of 10</h1>
  <h5>Question 1</h5>
  <div class="group">
    <div>
      <input type="radio" id="1" name="q1" value="o1">
      <label for="1"> Option 1 </label>
    </div>
    <div>
      <input type="radio" id="2" name="q1" value="o2">
      <label for="2"> Option 2</label>
    </div>
  </div>
</div>

Answer 2

仅使用 CSS 有点棘手，但并非不可能。我改变了一点 HTML 结构，但它可以工作。

unchecked 属性不存在，您应该只使用<input type="radio" id="opt1" name="q1" value="o1"> 并为选定状态添加checked，如下例所示。

.choices {
  position: relative;
}
.choices > input[type="radio"] {
  position: absolute;
  left: 4px;
  top: 4px;
}
.choices label {
  padding: 4px 32px;
  display: block;
}
.choices > input[type="radio"]:checked + label {
  background: yellow;
}

<div class="quest">
    <h1>Question 1 of 10</h1>
    <h5>Question 1</h5>
    <div class="group">
        <div class="choices">
            <input type="radio" id="opt1" name="q1" value="o1">
            <label for="opt1">Option 1</label>
        </div>
        <div class="choices">
            <input type="radio" id="opt2" name="q1" value="o2">
            <label for="opt2">Option 2</label>
        </div>
        <div class="choices">
            <input type="radio" id="opt3" name="q1" value="o3" checked>
            <label for="opt3">Option 3</label>
        </div>
        <div class="choices">
            <input type="radio" id="opt4" name="q1" value="o4">
            <label for="opt4">Option 4</label>
        </div>
    </div>
</div>

Answer 3

您的代码中存在一些问题：

label的for属性应该与对应input的id相同

<div>
    <input type="radio" id="5" name="q1" value="o1">
    <label for="5"> Option 1 </label>
</div>

收音机的 HTML 中没有 unchecked 属性！

我们只有checked 属性。请参阅MDN Docs 和this question 了解更多信息。

造型

由于您无法在 CSS 中选择父元素，您可以按照我上面提到的格式编写代码并设置输入标签的样式。

input[type="radio"]:checked + label {
  background: yellow;
}

否则需要使用js：if checkbox checked add class to parent element

Answer 4

您可以在 JScript 中处理它，如果您转到 CSS 文档，css 代码可能无法在旧浏览器上运行：

var elements = document.getElementsByClassName("answer");

for (var i = 0; i < elements.length; i++) {
  var element1 = elements[i];
    element1.addEventListener('click', function(element1){
       
      this.firstElementChild.className="selected"
     }, false);
  element1.addEventListener('focusout', function(element1){
       
      this.firstElementChild.className="area";
      this.firstElementChild.firstElementChild.checked=false;
     }, false);
}

.answer{margin-top:30px;}
.selected{background:yellow;padding:10px;}
.area{
  background:red;
  padding:10px;
  
}
.area:active{background:yellow;}
      

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
  
<body>
<div class="Question_box">
  1. Question is to pick one.
  </div>  
  </br>
  <div class="answer">
    <label class="area">
      <input type="radio" name="data" id="1" class="radio"/> Option 1
    </label>
  </div>
  <div class="answer">
    <label class="area">
      <input type="radio" name="data" id="2" class="radio"/> Option 2
    </label>
  </div>
  <div class="answer">
    <label class="area">
      <input type="radio" name="data" id="3" class="radio"/> Option 3
    </label>
  </div>
  <div class="answer">
    <label class="area">
      <input type="radio" name="data"id="4" class="radio"/> Option 4
    </label>
  </div>
  </div>
</body>
</html>

Answer 5

您需要更改标记和一点 CSS。
主要的CSS将是 input[type="radio"]:checked+.choices {background: yellow;} 设置了这个

<label for="opt1" class="choices">
    <input type="radio" id="5" name="q2" value="o1" unchecked="checked">Option 1<br>
</label>

所有输入都需要这样写，

<input type="radio" id="5" name="q2" value="o1" unchecked="checked">
<label for="opt1" class="choices">Option 1</label>

我不知道你的第二个问题，但我认为没什么好考虑的。