html – Radio buttons don’t apply CSS on check


.poller-nature-radio input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

#id_poller_nature label {
    display: inline-block;
    background-color: #ddd;
    padding: 10px 20px;
    font-family: sans-serif, Arial;
    font-size: 16px;
    border: 2px solid #444;
    border-radius: 4px;
}

#id_poller_nature {
    display: flex;
}

#id_poller_nature li {
    list-style-type: none;
}

#id_poller_nature input[type="radio"]:checked + label {
    background-color:#bfb;
    border-color: #4c4;
}
<div class="fieldWrapper poller-nature-radio">
  <label for="id_poller_nature_0">Nothing changes on select:</label>
  <ul id="id_poller_nature">
<li><label for="id_poller_nature_0"><input type="radio" name="poller_nature" value="Choice 1" required="" id="id_poller_nature_0">
    Question</label>

</li>
<li><label for="id_poller_nature_1"><input type="radio" name="poller_nature" value="Choice 2" required="" id="id_poller_nature_1">
    Information</label>

</li>
  </ul>
</div>



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here