I created 3 radio buttons and hid the radio circle using the CSS code below:
input[type=“radio”] {
opacity: 0;
width: 0;
position: fixed;
}
Then I designed it to look like a button using the following CSS:
#radioButtons {
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 13px;
border: 2px solid #444;
border-radius: 4px;
width: 350px;
text-align: center;
}
Everything applied so far. Now the status state, I only need the hover and checked state, so I tried:
#radioButtons:hover {
background-color: #ffcbba;
color: #330033;
}
#radioButtons:checked {
background-color: red;
color: white;
}
the problem is that the hover works, but the checked does not work when I click on the buttons. I just can’t figure it out why it doesn’t work.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)