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.

 <style>
        input:checked {
            height: 30px;
            width: 25px;
        }
    </style>

<body>
    <form>
        <fieldset>
            <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"/>
        </fieldset>
    </form>

    <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
       </strong></p>
</body>

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.

OUTPUT

Views: 3730 | Post Order: 17

CSS3 > Selectors

Checked in CSS3

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

Related Posts

Utility Tools