Question

我创建了一个多项选择测验，其中每个响应都包含在带有复选框的块中。当我检查某个答案时，我希望其中包含的方块变色。

当我使用以下CSS时，它似乎没有任何作用：

input[type="checkbox"]:checked {
  color: #F2F2F2;
}

这是我当前网页的图像：

但是，包含刻度的3个框应突出显示为浅灰色。

作为参考，这里是所有的html和CSS，因为我不确定我哪里出错了。我的问题主要只涉及“ answer”类的网格项：

.banner {
    z-index: 2;
    position: absolute;
    height: 12.5vh;
    width: 100%;
    top: 0px;
    background-color: #F8F8F8;
    margin: 0;
    border-bottom-width: 1px;
    border-bottom-color: #C6C6C6;
    border-bottom-style: solid;
}

.header {
    line-height: 5.6vh;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    z-index: 3;
    padding: 0;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 2.6vh;
}

.logo img {
    z-index: 4;
    height: 11.5vh;
    width: calc(11.5vh / 1.125);
    left: 0.5vh;
    top: 0.5vh;
}

.strip {
    height: 100vh;
    width: 62%;
    background-color: white;
    z-index: 1;
    margin: auto;
    top: 0px;
    left: 0px;
    right: 0px;
    min-width: calc(100vh/1.85);
    font-family: sans-serif;
}

.question {
  margin-top: 15vh;
  margin-left: 6vh;
  margin-right: 6vh;
  text-align: center;
  font-size: 5vh;
}

.grid {
  display: grid;
  border-top: 1px #D8D8D8 solid;
  margin-right: 5vh;
  margin-left: 5vh;
}

.answer {
  border-right: 1px #D8D8D8 solid;
  border-left: 1px #D8D8D8 solid;
  border-bottom: 1px #D8D8D8 solid;
  padding: 1.5vh;
  font-size: 3vh;
}

.answer:hover {
  background-color: #F2F2F2;
}

input[type="checkbox"]:checked {
  color: #F2F2F2;
}

.header, .logo img, .strip {
  position: absolute;
}

body {
    background-color: #d1e1ff;
    margin: 0;
}

.next-btn {
  border: 2px #d1e1ff solid;
  background-color: white;
  border-top: none;
  outline: none;
  border-bottom-left-radius: 3vw;
  border-bottom-right-radius: 3vw;
  cursor: pointer;
  padding: 2.5vh;
  font-size: 3vh;
  font-family: sans-serif;
  font-weight: bold;
}

.next-btn:hover {
  background-color: #F5FBFF;
}

<head>
	<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>

<body>

	<div class = banner>
	</div>

	<div class = header>
		<h1>club quiz<h1>
	</div>
	
	<div class = logo>
		<img src = "https://myuwastudentguild.com/wp-content/uploads/2015/02/UWA_Student_Guild_Corpo15A_Black.png"/>
	</div>

  <div class = strip>
    <h1 class = question>Q: this is a question, this is a question?</h1>
    
    <div class = grid>
      <label class = answer><input type = "checkbox" name = "answer" value = "1" /> <span id = "answer1"></span></label>
      <label class = answer><input type = "checkbox" name = "answer" value = "2" /> <span id = "answer2"></span></label>
      <label class = answer><input type = "checkbox" name = "answer" value = "3" /> <span id = "answer3"></span></label>
      <label class = answer><input type = "checkbox" name = "answer" value = "4" /> <span id = "answer4"></span></label>
      <label class = answer><input type = "checkbox" name = "answer" value = "5" /> <span id = "answer5"></span></label>
      <label class = answer><input type = "checkbox" name = "answer" value = "6" /> <span id = "answer6"></span></label>
      <button id = "nextButton" class = "next-btn" onclick = "loadNextQuestion()";">NEXT</button>
    <div>

    <script src = "question.js"></script>
    <script src = "script.js"></script>

  </div>

</body>

Answer 1

效果很好，您的颜色完全没有效果。您想要设置框/标签的样式，但CSS设置输入的样式。如果标签与输入位于同一DOM级别，则可以使用~选择器选择标签。

更改以下内容：

像这样的HTML

<label for="check"></label>
<input type="checkbox" name="check">

css：

input[type="checkbox"]:checked ~label {
  color: #F2F2F2;
}

Answer 2

您的样式可以按预期工作-输入的颜色为#F2F2F2，您可能希望将样式设置为标签parent-负责显示整个行。同样，color会更改文本颜色，似乎您想要background-color来代替。

Answer 3

我最好建议您尝试“完全”自定义复选框，因为复选框元素和单选按钮的样式不如文本输入或其他类似文本的样式。

您几乎可以轻松实现任何目标。关键是用display: none隐藏复选框，然后将其包装在标签中，将在点击时触发检查事件。在那之后，这只是一些html + css魔术。

此处的基本示例：W3School custom checkbox

复选框处于“选中”状态时无法更改CSS样式

3 个答案: