006-CSS3 form beautification

/* style reset */
        *{
            margin: 0;
            padding: 0;
            font-style: initial;
        }
        input{
            outline: none;
        }


        /* form layout */
        html{
            height: 100%;
        }
        body{
            margin: 0;
            height: 100%;
        }
        td{
            height: 50px;
        }
        #mask{
            height: 100%;
            background: url('https://timgsa.baidu.com/timg?image&quality=80&') no-repeat center;
            background-size: cover;
            filter: blur(5px);
        }
        .drug{
            width: 520px;
            min-height: 640px;
            background: rgba(255,255,255,.8);
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -260px;
            margin-top: -320px;
            border: 1px solid #fff;
            background-clip: content-box;
            padding: 10px;
            border-radius: 10px;
        }
        .title{
            text-align: center;
            font-size: 28px;
            margin: 24px 0;
            display: flex;
        }
        .title .title_name{
            padding: 0 20px;
        }
        .title .line{
            background:linear-gradient(transparent 49%, #000 49%, #000 51%, transparent 51%);
            flex: 1;
        }

        table{
            widows: 100%;
        }
        .td_left{
            width: 150px;
            text-align: right;
        }


        /* Form beautification */
        input[type='text'],input[type='password']{
            height: 50px;
            border: none;
            border-bottom: 2px solid #7a7f75;
            transition: 0.5s;
            background: rgba(0,0,0,0);
        }
        input[type='text']::-webkit-input-placeholder,input[type='password']::-webkit-input-placeholder{
            transition: 0.5s;
            transform-origin: left top;
        }
        input[type='text']::-moz-placeholder,input[type='password']::-moz-placeholder{
            transition: 0.5s;
            transform-origin: left top;
        }
        input[type='text']:-ms-input-placeholder,input[type='password']:-ms-input-placeholder{
            transition: 0.5s;
            transform-origin: left top;
        }
        input[type='text']:focus,input[type='password']:focus{
            border-bottom-color:#000;
        }
        input[type='text']:focus::-webkit-input-placeholder,input[type='password']:focus::-webkit-input-placeholder{
            transform: scale(0.7) translateY(-16px);
        }
        input[type='text']:focus::-moz-placeholder,input[type='password']:focus::-moz-placeholder{
            transform: scale(0.7) translateY(-16px);
        }
        input[type='text']:focus:-ms-input-placeholder,input[type='password']:focus:-ms-input-placeholder{
            transform: scale(0.7) translateY(-16px);
        }


        /* Radio button beautification */
        .radio-box{
            margin-right: 16px;
        }
        .radio-box i{
            padding-left: 6px;
        }
        .radio-box input[type='radio']{
            display: none;
        }
        .radio-box label{
            cursor: pointer;
        }
        .radio-box label::before{
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            border: 1px solid red;
            border-radius: 50%;
            padding: 2px;
            position: relative;
            top: 1px;
        }
        .radio-box input[type='radio']:checked+label::before{
            background: red;
            background-clip: content-box;
        }


        /* Multi-select button beautification */
        .checkbox-box{
            margin-right: 10px;
        }
        .checkbox-box,.checkbox-box label{
            cursor: pointer;
        }
        .checkbox-box input[type='checkbox']{
            display: none;
        }
        .checkbox-box label i{
            display: inline-block;
            width: 10px;
            height: 10px;
            border: 1px solid #cccccc;
            position: relative;
            margin-right: 4px;
        }
        .checkbox-box input[type='checkbox']:checked+label i{
            border-color: red;
        }
        .checkbox-box input[type='checkbox']:checked+label i::before{
            content: '';
            display: inline-block;
            width: 2px;
            height: 6px;
            background: red;
            transform: rotate(-30deg);
            position: absolute;
            top: 4px;
            left: 0;
        }
        .checkbox-box input[type='checkbox']:checked+label i::after{
            content: '';
            display: inline-block;
            width: 2px;
            height: 10px;
            background: red;
            transform: rotate(30deg);
            position: absolute;
            top: 1px;
            left: 3px;
        }


        /* Multi-line text box */
        textarea{
            width: 280px;
            height: 100px;
            resize:none;
            padding: 10px;
            line-height: 140%;
        }


        /* Multi-select analog switch */
        .switch-box{
            width: 42px;
            height: 20px;
        }
        .switch-box input[type='checkbox']{
            display: none;
        }
        .switch-box label{
            display: block;
            cursor: pointer;
            border: 1px solid #888;
            height: 20px;
            border-radius: 15px;
            transition: 0.3s;
        }
        .switch-box label span.move{
            display: block;
            width: 20px;
            height: 20px;
            box-shadow: 1px 1px 1px #ccc;
            border-radius: 50%;
            background: #fff;
            transition: 0.3s;
            overflow: hidden;
        }
        .switch-box input[type='checkbox']:checked+label{
            background: green;
        }
        .switch-box input[type='checkbox']:checked+label span.move{
            transform: translateX(20px);
            box-shadow: none;
        }
        .switch-box span.move span{
            display: block;
            width: 40px;
            height: 20px;
            line-height: 20px;
            transition: 0.3s;
        }
        .switch-box input[type='checkbox']:checked+label span.move span{
            transform: translateX(-20px);
        }
        .switch-box em{
            width: 50%;
            text-align: center;
            font-size: 12px;
            font-family: normal;
            float: left;
        }


        /* radio navigation */
        .radio-nav-box input{
            display: none;
        }
        .radio-nav-box span{
            width: 80px;
            height: 30px;
            border: 1px solid #000;
            float: left;
            text-align: center;
            line-height: 30px;
            margin-left: -1px;
            padding: 0 5px;
            cursor: pointer;
        }
        .radio-nav-box input:checked+span{
            background: #000000;
            color: #ffffff;
        }

<body>
    <div id="mask">
        
    </div>
    <div class="drog">
        <h2 class="title">
            <span class="line"></span>
            <span class="title_name">User registration</span>
            <span class="line"></span>
        </h2>
        <table>
            <tbody>
                <tr>
                    <td class="td_left">姓名：</td>
                    <td><input type="text" name="" placeholder="Please enter your name"></td>
                </tr>
                <tr>
                    <td class="td_left">密码：</td>
                    <td><input type="password" name="" placeholder="Please enter your password"></td>
                </tr>
                <tr>
                    <td class="td_left">Confirm Password:</td>
                    <td><input type="password" name="" placeholder="Please confirm your password again"></td>
                </tr>
                <tr>
                    <td class="td_left">性别：</td>
                    <td>
                        <span class="radio-box">
                            <input id="man" type="radio" name="gender" checked>
                            <label for="man"><i>男</i></label>
                        </span>
                        <span class="radio-box">
                            <input id="woman" type="radio" name="gender">
                            <label for="woman"><i>女</i></label>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="td_left">Favorite Cuisine:</td>
                    <td>
                        <span class="checkbox-box">
                            <input id="food-c" type="checkbox" name="food" checked>
                            <label for="food-c"><i></i>川菜</label>
                        </span>
                        <span class="checkbox-box">
                            <input id="food-x" type="checkbox" name="food">
                            <label for="food-x"><i></i>湘菜</label>
                        </span>
                        <span class="checkbox-box">
                            <input id="food-y" type="checkbox" name="food">
                            <label for="food-y"><i></i>粤菜</label>
                        </span>
                        <span class="checkbox-box">
                            <input id="food-z" type="checkbox" name="food">
                            <label for="food-z"><i></i>浙菜</label>
                        </span>
                        <span class="checkbox-box">
                            <input id="food-s" type="checkbox" name="food">
                            <label for="food-s"><i></i>苏菜</label>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="td_left">开关：</td>
                    <td>
                        <div class="switch-box">
                            <input id="checkbox" type="checkbox">
                            <label for="checkbox">
                                <span class="move"></span>
                            </label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="td_left">Switch with text:</td>
                    <td>
                        <div class="switch-box">
                            <input id="checkbox-text" type="checkbox">
                            <label for="checkbox-text">
                                <span class="move">
                                    <span>
                                        <em>on</em>
                                        <em>off</em>
                                    </span>
                                </span>
                            </label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="td_left">Radio Navigation:</td>
                    <td>
                        <div class="radio-nav-box">
                            <label>
                                <input type="radio" name="radioNav" checked>
                                <span>Homepage</span>
                            </label>
                            <label>
                                <input type="radio" name="radioNav">
                                <span>Company Profile</span>
                            </label>
                            <label>
                                <input type="radio" name="radioNav">
                                <span>Contact Us</span>
                            </label>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="td_left">About:</td>
                    <td>
                        <textarea></textarea>
                    </td>
                </tr>
                <tr>
                    <td class="td_left"></td>
                    <td>
                        <input type="submit" value="提交">
                        <input type="reset" value="重置">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>