Question 43857 in Html Question posted in
Some basic documentation can be found here.

Radio buttons CSS not applied to all buttons in class – Html

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");
}
Tags:

2

Answers


  1. 0

    When used as an attribute of label, the for attribute has a value which is the id of the form element it relates to.
    — HTML attribute: for | MDN Web Docs

    So:

    <input type="radio" id="whatever">
<label for="whatever">Standard</label>

    If the input is a child of the label, their relationship is implicit, which means you don’t have to add the for="..." attribute manually.

    <label>
  Standard
  <input type="radio"><!-- No id is needed. -->
</label>

    Try it:

    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;
}

label:hover {
  border: solid 2px green;
  background-color: yellow;
}
    <form>

  <input type="radio" id="typeskill" name="RollType" checked="true">
  <label for="typeskill">Standard</label>

  <input type="radio" id="test" name="RollType">
  <label for="test">Pizza</label>

  <input type="radio" id="test2" name="RollType">
  <label for="test2">Steak</label>

  <input type="radio" id="typedamage" name="RollType">
  <label for="typedamage">Damage</label>

  <input type="radio" id="typerage" name="RollType">
  <label for="typerage">Rage</label>

  <input type="radio" id="typeslip" name="RollType">
  <label for="typeslip">Step sideways</label>

  <input type="radio" id="typeattack" name="RollType">
  <label for="typeattack">Attack</label>

  <input type="radio" id="typedodge" name="RollType">
  <label for="typedodge">Dodge</label>

</form>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search