How to show colour change when customised radio button is selected?

I am new to coding generally, and have been working on a quiz program on HTML and CSS (data is from PostgreSQL, framework SpringBoot on Eclipse. PHP and JQuery not included in syllabus).

Here’s my problem:

Now I have a list of answers where the user will have to select from.
Was hoping to have the colours of the button-like radio input? change colour when the user clicks on it.
Managed to create the buttons and the cursor when it hovers over the selections, but there’s no change despite my CSS.

Can someone tell me where I did wrong? Big thanks in advance.

※Updated HTML and CSS according to the advices in the comments + more code:

This is the HTML code:

the screenshot of the id: https://i.stack.imgur.com/4IeWK.png

<body>
    <form method="post" action="/result" data-th-object="${form}">
        <!-- ヘッダータイトル -->
        <div class="headerbackground">
            <h6>模擬試験オンライン</h6>
        </div>
        <br>
        <!-- 試験指示 -->
        <div class="examinstruction">
            <p>表示された言葉の英単語を以下から選び、</p>
            <p>OKボタンをクリックしてください。</p>
        </div>
        <br>
        <!-- question -->

        <div data-th-each="list, st : ${form.list}">
            <p style="text-align: center; font-size: 12px;">
                <span data-th-text="${list.questionCount}">n</span> <span>/</span> <span
                    data-th-text="${list.questionTotal}">/n</span>
            </p>
            <div class="questionborder">
                <p style="font-size: 22px; font-weight: bold"
                    data-th-text="${list.content}">question</p>
            </div>
            <!-- answer choice -->
            <fieldset style="border: 0">
                <div class="choiceradiobox"
                    data-th-each="choice, stat : ${list.choice}">
                    <input id="selectedchoice" data-th-name="|choice${st.count}|"
                        type="radio" data-th-value="${choice}"
                        />
                        <label
                        for="selectedchoice"><span data-th-text="${choice}"></span></label>
                </div>
            </fieldset>
        </div>

        <!-- 解答完了ボタン -->
        <div class="submitsection">
            <input class="btn btn-secondary" style="font-size: 25px"
                type="submit" onclick=validate() value="OK!">
        </div>
    </form>
</body>

JavaScript
​x
 
<body>    <form method="post" action="/result" data-th-object="${form}">        <!-- ヘッダータイトル -->        <div class="headerbackground">            <h6>模擬試験オンライン</h6>        </div>        <br>        <!-- 試験指示 -->        <div class="examinstruction">            <p>表示された言葉の英単語を以下から選び、</p>            <p>OKボタンをクリックしてください。</p>        </div>        <br>        <!-- question -->​        <div data-th-each="list, st : ${form.list}">            <p style="text-align: center; font-size: 12px;">                <span data-th-text="${list.questionCount}">n</span> <span>/</span> <span                    data-th-text="${list.questionTotal}">/n</span>            </p>            <div class="questionborder">                <p style="font-size: 22px; font-weight: bold"                    data-th-text="${list.content}">question</p>            </div>            <!-- answer choice -->            <fieldset style="border: 0">                <div class="choiceradiobox"                    data-th-each="choice, stat : ${list.choice}">                    <input id="selectedchoice" data-th-name="|choice${st.count}|"                        type="radio" data-th-value="${choice}"                        />                        <label                        for="selectedchoice"><span data-th-text="${choice}"></span></label>                </div>            </fieldset>        </div>​        <!-- 解答完了ボタン -->        <div class="submitsection">            <input class="btn btn-secondary" style="font-size: 25px"                type="submit" onclick=validate() value="OK!">        </div>    </form></body>​

CSS:

input[type=radio] {
     display: none;
}

input[type="radio"]:checked + label {
    background: #455a64; 
    color: #eceff1; 
}

label {
    display: block; 
    margin: auto; 
    width: max-content; 
    text-align: center;
    padding-top : 0.05em;
    padding-bottom: 0.05em;
    padding-left: 5em;
    padding-right: 5em;
    line-height: 45px; 
    cursor: pointer; 
    border: solid #eceff1;
    background-color: #eceff1;
    padding-top: 0.05em;
}

JavaScript
 
input[type=radio] {     display: none;}​input[type="radio"]:checked + label {    background: #455a64;     color: #eceff1; }​label {    display: block;     margin: auto;     width: max-content;     text-align: center;    padding-top : 0.05em;    padding-bottom: 0.05em;    padding-left: 5em;    padding-right: 5em;    line-height: 45px;     cursor: pointer;     border: solid #eceff1;    background-color: #eceff1;    padding-top: 0.05em;}​​  ​

Answer

UPDATE: Added live test at the end

Unlike class, each id property must be unique in the whole document.

More about id

Matching id and for also need to be assigned for each pair of input and label to make the styles work.

The input[type="radio"]:checked + label selector is not targeting the label properly.

This is because it uses adjacent sibling selector +, but input and label are not adjacent due to a <br> in between.

More about CSS combinators

To solve this, you could use a general sibling combinator ~ to target the label:

input[type="radio"]:checked ~ label {
    background: #455a64; 
    color: #eceff1; 
}

JavaScript
 
input[type="radio"]:checked ~ label {    background: #455a64;     color: #eceff1; }​

OR remove the <br> in between the input and label, and keep the original CSS:

<div class="choiceradiobox" data-th-each="choice, stat : ${list.choice}">
  <input
    id="selectedchoice"
    name="choice"
    type="radio"
    data-th-value="*{list[__${st.index}__].choice}"
  />
  <label for="selectedchoice"><span data-th-text="${choice}"></span></label>
</div>

JavaScript
 
<div class="choiceradiobox" data-th-each="choice, stat : ${list.choice}">  <input    id="selectedchoice"    name="choice"    type="radio"    data-th-value="*{list[__${st.index}__].choice}"  />  <label for="selectedchoice"><span data-th-text="${choice}"></span></label></div>​

Both ways should make label change color when :checked.

Hope this will help!

LIVE TEST (run with button below)

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked ~ label {
  background: #455a64;
  color: #eceff1;
}

label {
  display: block;
  margin: auto;
  width: max-content;
  text-align: center;
  padding-top: 0.05em;
  padding-bottom: 0.05em;
  padding-left: 5em;
  padding-right: 5em;
  line-height: 45px;
  cursor: pointer;
  border: solid #eceff1;
  background-color: #eceff1;
  padding-top: 0.05em;
}

JavaScript
 
input[type="radio"] {  display: none;}​input[type="radio"]:checked ~ label {  background: #455a64;  color: #eceff1;}​label {  display: block;  margin: auto;  width: max-content;  text-align: center;  padding-top: 0.05em;  padding-bottom: 0.05em;  padding-left: 5em;  padding-right: 5em;  line-height: 45px;  cursor: pointer;  border: solid #eceff1;  background-color: #eceff1;  padding-top: 0.05em;}

<fieldset style="border: 0">
  <div class="choiceradiobox" data-th-each="choice, stat : ${list.choice}">
    <input
      id="selectedchoice1"
      name="choice"
      type="radio"
      data-th-value="*{list[__${st.index}__].choice}"
    /><br />
    <label for="selectedchoice1">selectedchoice1</label>
  </div>
  <div class="choiceradiobox" data-th-each="choice, stat : ${list.choice}">
    <input
      id="selectedchoice2"
      name="choice"
      type="radio"
      data-th-value="*{list[__${st.index}__].choice}"
    /><br />
    <label for="selectedchoice2">selectedchoice2</label>
  </div>
  <div class="choiceradiobox" data-th-each="choice, stat : ${list.choice}">
    <input
      id="selectedchoice3"
      name="choice"
      type="radio"
      data-th-value="*{list[__${st.index}__].choice}"
    /><br />
    <label for="selectedchoice3">selectedchoice3</label>
  </div>
</fieldset>

JavaScript
 
<fieldset style="border: 0">  <div class="choiceradiobox" data-th-each="choice, stat : ${list.choice}">    <input      id="selectedchoice1"      name="choice"      type="radio"      data-th-value="*{list[__${st.index}__].choice}"    /><br />    <label for="selectedchoice1">selectedchoice1</label>  </div>  <div class="choiceradiobox" data-th-each="choice, stat : ${list.choice}">    <input      id="selectedchoice2"      name="choice"      type="radio"      data-th-value="*{list[__${st.index}__].choice}"    /><br />    <label for="selectedchoice2">selectedchoice2</label>  </div>  <div class="choiceradiobox" data-th-each="choice, stat : ${list.choice}">    <input      id="selectedchoice3"      name="choice"      type="radio"      data-th-value="*{list[__${st.index}__].choice}"    /><br />    <label for="selectedchoice3">selectedchoice3</label>  </div></fieldset>

Advertisement

Answer