css实现简洁的留言联系我们表单验证效果代码-html代码-BFW代码库

css实现简洁的留言联系我们表单验证效果代码

代码语言：html

代码描述：css实现简洁的留言联系我们表单验证效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <style>
        .contact_form {
            padding-top: 40px;
        }
        .title {
            background-color: rgba(0,0,0,0.56);
            text-align: center;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            padding: 5px 0;
        }
        .title a {
            color: #FFF;
            text-decoration: none;
            font-size: 16px;
            font-weight: bolder;
            line-height: 24px;
        }
        /* === Remove input autofocus webkit === */
        *:focus {
            outline: none;
        }

        /* === Form Typography === */
        body {
            font: 14px/21px "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
        }
        .contact_form h2, .contact_form label {
            font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
        }
        .form_hint, .required_notification {
            font-size: 11px;
        }
        body {
            background: #fff;
            font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
        }

        /* === List Styles === */
        .contact_form ul {
            width: 750px;
            list-style-type: none;
            list-style-position: outside;
            margin: 0px;
            padding: 0px;
        }
        .contact_form li {
            padding: 12px;
            border-bottom: 1px solid #eee;
            position: relative;
        }
        .contact_form li:first-child, .contact_form li:last-child {
            border-bottom: 1px solid #777;
        }

        /* === Form Header === */
        .contact_form h2 {
            margin: 0;
            display: inline;
        }
        .required_notification {
            color: #d45252;
            margin: 5px 0 0 0;
            display: inline;
            float: right;
        }

        /* === Form Elements === */
        .contact_form label {
            width: 150px;
            margin-top: 3px;
            display: inline-block;
            float: left;
            padding: 3px;
        }
        .contact_form input {
            height: 20px;
            width: 220px;
            padding: 5px 8px;
        }
        .contact_form textarea {
            padding: 8px;
            width: 300px;
        }
        .contact_form button {
            margin-left: 156px;
        }

        /* form element visual styles */
        .contact_form input, .contact_form textarea {
            border: 1px solid #aaa;
            box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
            border-radius: 2px;
            padding-right: 30px;
            -moz-transition: padding .25s;
            -webkit-transition: padding .25s;
            -o-transition: padding .25s;
            transition: padding .25s;
        }
        .contact_form input:focus, .contact_form textarea:focus {
            background: #fff;
            border: 1px solid #555;
            box-shadow: 0 0 3px #aaa;
            padding-right: 70px;
        }

        /* === HTML5 validation styles === */
        .contact_form input:required, .contact_form textarea:required {}
        .contact_form input:required:valid, .contact_form textarea:required:valid {

            box-shadow: 0 0 5px #5cd053;
            border-color: #28921f;
        }
        .contact_form input:focus:invalid, .contact_form textarea:focus:invalid {

            box-shadow: 0 0 5px #d45252;
            border-color: #b03535
        }

        /* === Form hints === */
        .form_hint {
            background: #d45252;
            border-radius: 3px 3px 3px 3px;
            color: white;
            margin-left: 8px;
            padding: 1px 6px;
            z-index: 999;
            /* hints stay above all other elements */
            position: absolute;
            /* allows proper formatting if hint is two lines */
            display: none;
        }
        .form_hint::before {
            content: "\25C0";
            color: #d45252;
            position: absolute;
            top: 1px;
            left: -6px;
        }
        .contact_form input:focus + .form_hint {
            display: inline;
        }
        .contact_form input:required:vali.........完整代码请登录后点击上方下载按钮下载查看