required和optional表单美化例子

<!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>
posted on 2018-06-20 21:43 想养猫的通信狗阅读(393) 评论(0) 收藏举报