0

I have a radio input + label in my form and would like to change the label style for when the input label is selected/radio is checked (radio input display is none though). The last part of the .css is not working (label changing with radio checked).

Unfortunately, the html structure cannot be changed for label to be inside input.

Thank you in advance.

Partial code below:

HTML

<div class="form_radios">
    <ul id="radio_item" class="radio_item">
        <li><label for="radio_item_0"><input type="radio" name="type" value="1" id="radio_item_0" class="radio_item"></label></li>
        <li><label for="radio_item_1"><input type="radio" name="type" value="2" id="radio_item_1" class="radio_item"></label></li>
    </ul>
</div>

CSS

ul#radio_item li{
    display: inline-block;
    margin: 0 5%;
}
ul#radio_item li label{
    border: 2px solid red;
    padding: 2.5px 7.5px;
}
ul#radio_item li input[type=radio]{
    display: none;
}
    ul#radio_item li input[type=radio]:checked + label{
        background-color: blue;
        color: white;
        border: 2px solid blue;
    }

0 Answers0