Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .example { margin: 40px auto; max-width: 400px; } label, button { display: block; width: 100%; margin-bottom: 1.5em; } input, select, button { padding: .4em 1em; } input, select { border: 1px solid #666666; } input:optional, select:optional { background-color: #eeeeee; color: #666666; } input:required, textarea:required { border-bottom: 3px solid #1c87c9; } </style> </head> <body> <h2>:required selector example</h2> <div class="example"> <form action="#"> <label> <input type="name" required>Name * </label> <label> <input type="email" required>Email * </label> <label> <input type="phone">Phone (optional) </label> <label> <input type="url">Address (optional) </label> </form> </div> </body> </html>