Radio buttons CSS not applied to all buttons in class

Question

I'm trying to use CSS to create text-only radio buttons, that change appearance on mouse hover and clicking.

I found some CSS code in a 9-year old answer that I thought would work.

While that code did work in its fiddle, when I tried to use it in my code, the CSS is not applied to any of the buttons I created when I click or hover over them.

But it is applied to the buttons adapted from the original answer's HTML – "Pizza" and "Steak".

The CSS is only applied to the "Standard" button, which has the "checked='true'" tag.

I can't identify why the CSS will not alter the appearance of the radio buttons I made. All of the buttons have the same type, class and name identifiers, and unique value, label and id tags.

Also, each button is set to run a test function when clicked. But the func is only called when the "Pizza" and "Steak" buttons are clicked.

Can anyone suggest a reason and a fix for this?

The relevant code is below, and is available on JSFiddle.

Thanks.

<form>
  <input type="radio" class="RadioEntry" id="typeskill" name="RollType" value="skill" checked="true" onclick="testfunc()"><label for="standard">Standard</label>

  <input type="radio" class="RadioEntry" id="test" name="RollType" value="test" onclick="testfunc()"><label for="test">Pizza</label>

  <input type="radio" class="RadioEntry" id="test2" name="RollType" value="test2" onclick="testfunc()"><label for="test2">Steak</label>

  <input type="radio" class="RadioEntry" id="typedamage" name="RollType" value="damage" onclick="testfunc()"><label for="damage">Damage</label>

  <input type="radio" class="RadioEntry" id="typerage" name="RollType" value="rage" onclick="testfunc()"><label for="rage">Rage</label>

  <input type="radio" class="RadioEntry" id="typeslip" name="RollType" value="slip" onclick="testfunc()"><label for="slip">Step sideways</label>

  <input type="radio" class="RadioEntry" id="typeattack" name="RollType" value="attack" onclick="testfunc()"><label for="attack">Attack</label>

  <input type="radio" class="RadioEntry" id="typedodge" name="RollType" value="dodge" onclick="testfunc()"><label for="dodge">Dodge</label>

</form>

label {
  display: inline-block;
  width: 200px;
  padding: 10px;
  border: solid 2px #ccc;
  transition: all 0.3s;
}

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

input[type="radio"]:checked + label {
  border: solid 2px green;
  background-color: red;
}

input[type="radio"]:hover + label {
  border: solid 2px green;
  background-color: yellow;
}

function testfunc() {
  console.log("A radio button was clicked");
}

Answer 1

The for attribute's value most be the exactly targeted input's id

.RadioEntry {
    background-color: #888;
}

#typeskill {
    background-color: #333;
}

#typeslip {
    background-color: #999;
}

label {
  display: inline-block;
  width: 200px;
  padding: 10px;
  border: solid 2px #ccc;
  transition: all 0.3s;
}

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

input[type="radio"]:checked + label,
input[type="radio"]:checked {
  border: solid 2px green;
    background-color: red;
}

input[type="radio"]:hover + label,
input[type="radio"]:hover {
  border: solid 2px green;
  background-color: yellow;
}

.hover {
  border: solid 2px green;
  background-color: yellow;
}

    <form>
        <input type="radio" class="RadioEntry" id="typeskill" name="RollType" value="skill" checked="true">
        <label for="standard">Standard</label>
    
        <input type="radio" class="RadioEntry" id="test" name="RollType" value="test">
        <label for="test">Pizza</label>
    
        <input type="radio" class="RadioEntry" id="test2" name="RollType" value="test2">
        <label for="test2">Steak</label>
    
        <input type="radio" class="RadioEntry" id="damage" name="RollType" value="damage">
        <label for="damage">Damage</label>
    
        <input type="radio" class="RadioEntry" id="rage" name="RollType" value="rage">
        <label for="rage">Rage</label>
    
        <input type="radio" class="RadioEntry" id="slip" name="RollType" value="slip">
        <label for="slip">Step sideways</label>
        
        <input type="radio" class="RadioEntry" id="attack" name="RollType" value="attack">
        <label for="attack">Attack</label>
        
        <input type="radio" class="RadioEntry" id="dodge" name="RollType" value="dodge">
        <label for="dodge">Dodge</label>
    </form>