006-CSS3表单美化

 /* 样式重置 */
        *{
            margin: 0;
            padding: 0;
            font-style: initial;
        }
        input{
            outline: none;
        }


        /* 表单布局 */
        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);
        }
        .drog{
            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;
        }


        /* 表单美化 */
        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-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;
        }


        /* 多选按钮美化 */
        .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;
        }


        /* 多行文本框 */
        textarea{
            width: 280px;
            height: 100px;
            resize:none;
            padding: 10px;
            line-height: 140%;
        }


        /* 多选模拟开关 */
        .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-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;
        }

    

        
    
    

        

            
            用户注册
            
        
        

            

                

                    
姓名：
                    

                
                

                    
密码：
                    

                
                

                    
确认密码：
                    

                
                

                    
性别：
                    

                        
                            
                            男
                        
                        
                            
                            女
                        
                    
                
                

                    
喜爱的菜系：
                    

                        
                            
                            川菜
                        
                        
                            
                            湘菜
                        
                        
                            
                            粤菜
                        
                        
                            
                            浙菜
                        
                        
                            
                            苏菜
                        
                    
                
                

                    
开关：
                    

                        

                            
                            
                                
                            
                        
                    
                
                

                    
开关带文字：
                    

                        

                            
                            
                                
                                    
                                        on
                                        off
                                    
                                
                            
                        
                    
                
                

                    
单选导航：
                    

                        

                            
                                
                                网站首页
                            
                            
                                
                                公司简介
                            
                            
                                
                                联系我们
                            
                        
                    
                

                

                    
个人简介：