html - 选择单选按钮时可以更改背景吗？

Question

所以我在代码上有点挣扎，我无法让它工作。而且我对 HTML 和 CSS 还很陌生，所以我的知识仅限于我现在所掌握的知识。

当收音机按钮检查时，我想从截面更改中进行背景。我尝试使用 :checked 但这没有帮助。也许我忘记了一些东西，但我的知识是有限的。所以请帮帮我。我真的很想学！！

这是我到目前为止的代码：

https://www.w3schools.com/code/tryit.asp?filename=GM1G8536IJ2O

function clearRadioButtons() {
  var radioButtonArray = document.getElementsByName('radioList');

  for (var i = 0; i < radioButtonArray.length; i++) {
    var radioButton = radioButtonArray[i];
    radioButton.checked = false;
  }
}

/* The container */

.container {
  display: block;
  position: relative;
  padding-left: 45px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  font-family: 'Open Sans', sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* Hide the browser's default radio button */

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}


/* Custom radio button */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  background-color: white;
  border-radius: 50%;
  border-color: black;
  transition: all 200ms;
  border: 1px solid #e0e0e0;
}


/* On mouse-over, grey background color */

.container:hover input~.checkmark {
  background-color: #e0e0e0;
  transition: all 200ms;
  border: 1px solid white;
}


/* When the radio button is checked */

.container input:checked~.checkmark {
  background-color: #a4e813;
  transition: all 200ms;
  border: 1px solid white;
}


/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


/* Show the indicator (dot/circle) when checked */

.container input:checked~.checkmark:after {
  display: block;
}


/* Style the indicator (dot/circle) */

.container .checkmark:after {
  top: 5px;
  left: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
}

.tekst {
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
}

.sectie {
  background: #fcfcfc;
  padding: 15px;
  max-width: 500px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  margin-bottom: 20px;
  transition: all 400ms;
}


/* This is the CSS that I need when the radio button is checked */

.sectie:hover {
  box-shadow: 0px 0px 10px -5px gray;
  transition: all 400ms;
  border: 1px solid #a4e813;
  background: #f5ffe0;
}

.ongedaanknop {
  padding: 10px;
  background: white;
  border: 1px solid gray;
  border-radius: 50px;
  transition: all 200ms;
}

.ongedaanknop:hover {
  background: #cf7c69;
  color: white;
  transition: all 200ms;
  border: 1px solid white;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<div class="sectie"><label class="container">Regulier 30 minuten examen
 <input type="radio" name="radioList" value="off">
 <span class="checkmark"></span><p class="tekst">Dit is een test</p>
</label></div>
<div class="sectie"><label class="container">Verlengd examen 45 minuten
 <input type="radio" name="radioList" value="off">
 <span class="checkmark"></span><p class="tekst">Dit is een test</p>
</label></div>
<input class="ongedaanknop" type="button" onclick="clearRadioButtons();" value="Selectie ongedaan maken" />

标签： htmlcssformsradio-buttonchecked