required和optional表单美化例子

Posted island1994

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

 

以上是关于required和optional表单美化例子的主要内容，如果未能解决你的问题，请参考以下文章

ajaxForm

jQuery星级评论表单美化代码

前端提交表单两种验证方式记录 jq或h5 required属性

用 Ext 美化 PHP 生成的表格

表单元素验证的几种场景

怎样用 CSS + JS 美化网页中的 select 下拉框