CSS3 > Selectors

Checked in CSS3

How to check the input elements like radio & checkbox,...etc in CSS3?

By using Checked selector we can check the input element like radio & checkbox. Checked selector is only associated with radio and checkbox in the <input> elements. The checked selector matches radio & checkbox input types when checked to an  on state, if they are checked means there is a match, if not means there is no match.

        input:checked {
            height: 30px;
            width: 25px;

            <legend>Select Details</legend>
            RadioButton -
            <input type="radio" id="radio1" name="radio1"
                value="1" />
            Value 1
            <input type="radio" id="radio2" name="radio1" value="2" />
            Value 2
            <input type="radio" id="radio3" name="radio1" value="3" />
            Value 3<br />
            Checkbox <input type="checkbox" checked="checked" value="ITFunda"/>
                     <input type="checkbox" value="DotNetFunda"/>
                     <input type="checkbox" value="TechFunda"/>
            <br />
            Enter Name <input type="text" name="user" placeholder="Enter here"/>

    <p><strong>Note: You can find the changes by clicking on above three input elements.<br />
        :checked selector is only applicable for the radio & checkbox in the input elements

In the above code snippet, we have given checked selector only to the radio and checkbox in the  <input> elements. Because checked selector is only associated with radio & checkbox in the <input> elements.


 Views: 3408 | Post Order: 17

Write for us

Hosting Recommendations