required和optional表单案例

CSS
在这里插.clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
        }

        * {
            padding: 0;
            margin: 0;
            box-sizing: content-box;
        }

        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:focus,
        select:focus,
        textarea:focus {
            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;
        }

        .container {
            max-width: 400px;
            margin: 20px auto;
            /* border: 1px solid #999; */
        }

        input,
        select,
        textarea {
            width: 240px;
            margin: 10px 0;
            padding: .5em .1em;
            border: 1px solid #999;
        }

        label {
            margin-left: 10px;
            color: #999;
        }

        input[type="submit"] {
            background-color: #cc00aa;
            border: 1px solid #aa0088;
            padding: 10px 0;
            color: #fff;
        }

        input[type="submit"]:hover {
            cursor: pointer;
            background-color: #aa0088;
        }入代码片

HTML
<div class="container">
        <form action="#">
            <input type="name" id="name" required><label for="name">名称</label>
            <input type="email" id="email" required><label for="email">邮箱</label>
            <input type="tel" name="" id="tel"><label for="tel">手机</label>
            <input type="url" name="" id="url"><label for="url">网址</label>
            <select name="#" id="">
                <option value="1">非必填选项1</option>
                <option value="2">非必填选项2</option>
                <option value="3">非必填选项3</option>
                <option value="4">非必填选项4</option>
            </select>
            <textarea name="" id="" cols="30" rows="10" placeholder="留言(必填)" required></textarea>
            <input type="submit" value="提交表单">
        </form>
    </div>