HTML-仅使用CSS更改答案选择的背景色-堆栈溢出

顺晟科技

2022-10-19 13:24:46

123

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

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

.choices>输入[type=“radio”]:选中{background：yellow；}

但似乎不是真的。还有谁能告诉我当我将unchecked=“checked”放入收音框行时有什么不同？

非常感谢大家！

顺晟科技：

一些人已经指出check+label是一个可能的解决方案。下面是示例，但略有缩短。

您可以在JScript中处理它，如果您查看CSS文档，CSS代码可能无法在旧的浏览器上工作:

只使用CSS有点棘手，但并非不可能。我对HTML结构做了一点修改，但它能正常工作。

该属性不存在，您只应使用并添加所选状态，如下面的示例所示。

代码中存在一些问题:

的属性应与对应的

相同

HTML中没有用于Radio的属性！

我们只有属性。有关更多信息，请参见MDN docs和this question。

样式

因为在CSS中不能选择父元素，所以可以用上面提到的格式编写代码，并设置输入标签的样式。

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

否则，您需要使用js:If checkbox checked add class to parent-element

您需要更改您的标记和一点点CSS。主css将是已安装此

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

所有输入都需要这样写，

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

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

上一篇：JavaScript--如果选中了某下一篇：HTML+javascript书签用

网站建设

Html

HTML-仅使用CSS更改答案选择的背景色-堆栈溢出

的属性应与对应的

HTML中没有用于Radio的属性！

样式