Menu
I would like to know if it is possible to hide the checked radio button with css by using:
{ display:none; } I don't know how to address this element. The checked radio button always displays "none" which does not mean anything to the user and I wish to hide it. Is this possible? Thanks for any pointer.
343
The :checked CSS pseudo-class selector represents any radio ( <input type="radio"> ) element that is checked. The idea is to use the :checked selector to identify the selected radio button and unset it.
To show or hide an element when a radio button is selected: Add a click event handler to all input elements of type radio . Each time a radio button is selected, check if it is the button that should show the element. If it is, set the display property of the hidden element to block .
In your code you need to add <label for="r2"><span></span>Radio Button 2</label> after creating radio and using my css code you can do this. @DipeshParmar using input[type="radio"] { display:none; } will take out keyboard access from the radio buttons.
Just a little tip:
If you still want to use all the browser's native support for radios and check boxes, like moving between them with ↑ and ↓ keys, set the css to:
position: fixed; opacity: 0; pointer-events: none; This will keep all functionality but keep the input hidden, and won't take up any layout space.
I've spent the last 3 hours figuring this out, but it does work!
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
