CODEWITHSUNDEEP
htmlcssradio-button
bobsilon
bobsilon

Reputation: 1668

how to set a radio button state to checked with css?

i have a group of radio buttons with a default checked one. like this:

    <input type="radio" name="radioButton" id="rd1" checked="">
    <input type="radio" name="radioButton" id="rd2">
    <input type="radio" name="radioButton" id="rd3">
    <input type="radio" name="radioButton" id="rd4">
    <input type="radio" name="radioButton" id="rd5">

i know there is ways to add checked attribute with javascript. my question is how to add checked attr to selected radio button with css?

Upvotes: 4

Views: 18796

Answers (1)

Seimen
Seimen

Reputation: 7250

If you want to change the initially checked box, you should simply move the "checked" attribute to the desired element in your HTML, if you want to style the currently checked box you can use the following CSS selector: input[type=checkbox]:checkedand if you want to change the checked state by any other action than clicking a checkbox you must use JS.

The attribute "checked" differs from the actual .checked property in JS: while elem.getAttribute('checked') will only return other than null if the attribute is already set in your HTML (could also been changed via JS), elem.checked will always return a boolean (true/false) indicating if this box is currently checked.

Upvotes: 3

Related Questions