Optional selector in CSS3

How to give style to the input elements which does not have required attribute in CSS3?

By using optional selector we can give style to the input elements which does not have required attribute. The optional selectors selects form elements which are optional and applies the style to it.

<style>
        input:optional {
            background-color: lightblue;
            border-color: red;
        }
</style>

<body>
    <form>
        First Name<input type="text" required="required" />*<br/>
        Middle Name<input type="text" placeholder="This is Optional" /><br/>
        Last Name<input type="text" required="required" />*
    </form>
</body>

In the above code snippet we have given style to the optional selector. So that the optional selector finds the <input> element which does not have required attribute and applies style to it.

OUTPUT

Views: 3258 | Post Order: 33

CSS3 > Selectors

Optional selector in CSS3

How to give style to the input elements which does not have required attribute in CSS3?

Related Posts

Utility Tools