<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container{ max-width: 400px; margin: 20px auto; } input,select,textarea{ width: 240px; margin: 10px 0; border: 1px solid #999; padding: 0.5em 1em; } label{margin-left: 10px;color:#999;} input:required,textarea:required{ border-right: 3px solid #aa0088; } input:optional,select:optional{ border-right: 3px solid #999; } input:required + label::after{ content: "(必填)" } input:optional + label::after{ content: "(选填)" } input,select,textarea{outline: 0} input:required:focus, textarea:required:focus{ box-shadow: 0 0 3px 1px #aa0088; } input:optional:focus, select:optional:focus{ box-shadow: 0 0 3px 1px #999; } input[type="submit"]{ background-color: #cc00aa; border: 2px solid #aa0088; padding:10px 0; color: #fff; } input[type="submit"]:hover{ background-color: #aa0088; } </style> </head> <body> <div class="container"> <form> <input type="name" required><label>名称</label> <input type="email" required><label>邮箱</label> <input type="tel"><label>手机</label> <input type="url"><label>网站</label> <select name="#"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <textarea cols="30" rows="10" placeholder="留言（必填）" required=""></textarea> <input type="submit" value="提交表单"> </form> </div> </body> </html>
原文：https://www.cnblogs.com/island1994/p/9206244.html