Cannot alter CSS style when checkbox is in 'checked' state

Question

I have created a multi-choice quiz where each response is contained in a block with a checkbox. When I check a certain answer, I want the block which it is contained in to change colour.

When I use the following CSS, it seems to have no effect:

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

Here is an image of my webpage currently:

However, the 3 boxes containing ticks should be highlighted light grey.

For reference, here is all the html and CSS as I'm not sure where exactly I have gone wrong. My question mainly just concerns the grid items of class "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>

`color` is used for text-color. Did you want to use `background-color`? — Sebastian, Jan 22 '19 at 15:26
You cannot style the containing block as there is no parent css selector. Also, your css is trying to style the checkbox itself. — Pete, Jan 22 '19 at 15:59
If you restructure your html, you can absolutely position the checkbox and style the labels and make use of the for attribute to make the row clickable: http://jsfiddle.net/nk9uqwt3/ — Pete, Jan 22 '19 at 16:10

score 3 · Accepted Answer · edited Jan 22 '19 at 15:34

3

Well it works, your color just has no effect at all. You want to style the box / label but your CSS styles the input. You can select the label with the ~Selector, if it is on the same DOM-Level as the input.

Change the following:

Html like this:

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

css:

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

edited Jan 22 '19 at 15:34

KBell

431
5
16

answered Jan 22 '19 at 15:28

Heady

671
1
9
19

score 1 · Answer 2 · answered Jan 22 '19 at 15:26

Your style works as expected - the input has a color of #F2F2F2, what you probably want is to set the style to the label parent - which is responsible for showing the whole row. Also color would change the text color, it seems that you want background-color instead.

score 1 · Answer 3 · answered Jan 22 '19 at 15:33

The best I would recommand you is to try customizing your checkbox "completely", since checkbox element and radio buttons are not as easy to style as text inputs or other things like texts and so on.

You can easely achieve almost anything. The key is to hide your checkbox with display: none and wrap it in a label that will trigger the check event on click. After that, it's just some html+css magic.

Basic example here: W3School custom checkbox

Cannot alter CSS style when checkbox is in 'checked' state

3 Answers3