CSS | :required Selector - Tutorialspoint.dev

The required selector is used to select the required element with the required attribute and set the CSS property. Form elements with a required attribute are defined as required.

Note: This selector is used with form elements, eg. <input>, <select> and <textarea>.

Syntax:

:required {
    // CSS Property
}

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>:required Selector</title> 
        <style>          
            h1 { 
                color: green; 
            } 
            body { 
                text-align:center; 
            } 
            input:required { 
                background-color: green; 
                color: white; 
            } 
            form div { 
                padding: 10px; 
            } 
            label { 
                display: block; 
                font-size: 18px; 
            } 
            input { 
                border: 1px solid black; 
                padding: 9px; 
                font-size: 18px; 
            } 
        </style> 
    </head> 
    <body> 
        <h1>GeeksforGeeks</h1> 
        <h2>:required selector</h2> 
        <form> 
            <div> 
                <label for="name">Name</label> 
                <input type="text" name="name" id="name"/> 
            </div> 
            <div> 
                <label for="email">Email</label> 
                <input type="email" name="email" id="email" required /> 
            </div> 
            <div> 
                <input type="submit" value="Submit" /> 
            </div> 
        </form>  
    </body> 
</html>                     

Output:
required

Supported Browsers: The browser supported by :required Selector are listed below:

Apple Safari 5.0
Google Chrome 10.0
Firefox 4.0
Opera 10.0
Internet Explorer 10.0

CSS | :required Selector

tags:

leave a comment

0 Comments

Subscribe to Our Newsletter

Top Followed books