H5表单元素及美化

css部分

    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    
    body {
        margin: 0;
        font-size: 16px;
        color: #333;
        font-family: Microsoft Yahei;
    }
    
    p {
        margin: 10px 0;
    }
    
    input {
        font-family: Microsoft Yahei;
        vertical-align: middle;
    }
    
    input,
    select {
        -webkit-appearance: none;
        appearance: none;
    }
    
    input[type=radio]::-ms-clear,
    input[type=tel]::-ms-clear,
    input[type=number]::-ms-clear {
        display: none;
    }
    
    input[type=radio]::-ms-check,
    input[type=checkbox]::-ms-check {
        display: none;
    }
    
    select::-ms-expand {
        display: none;
    }
    
    a,
    button,
    input,
    textarea {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-user-modify: read-write-plaintext-only;
    }
    
    ::-webkit-input-placeholder {
        color: #999;
    }
    
    :-moz-placeholder {
        color: #999;
    }
    
    ::-moz-placeholder {
        color: #999;
    }
    
    ::-ms-input-placeholder {
        color: #999;
    }
    
    input:focus::-webkit-placeholder {
        color: #999;
    }
    
    .wrap {
        width: 90%;
        margin: 20px auto 0;
    }
    
    .frm {}
    
    .frm p {}
    
    .ipt {
        width: 96%;
        height: 26px;
        border: 1px solid #aaa;
    }
    
    .rad,
    .chk {
        width: 18px;
        height: 18px;
        position: relative;
        background: #fafafa;
        border: 1px solid #bbb;
        box-shadow: inset 0 0 0 10px #158EC6;
    }
    
    .rad:after,
    .chk:after {
        position: absolute;
        display: none;
        z-index: 3;
        color: #eee;
    }
    
    .rad {
        border-radius: 100%;
        background: #fafafa;
    }
    
    .rad:after {
        width: 6px;
        height: 6px;
        background: #fff;
        border-radius: 100%;
        content: '';
        left: 5px;
        top: 5px;
    }
    
    .rad:checked:after {
        display: block;
    }
    
    .chk {
        border-radius: 3px;
    }
    
    .chk:after {
        content: "\2713";
        font-size: 12px;
        left: 4px;
        top: -2px;
    }
    
    .chk:checked:after {
        display: block;
    }
    
    .selWrap {
        position: relative;
    }
    
    .selWrap:after {
        position: absolute;
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-width: 8px;
        border-style: solid dashed dashed;
        border-color: #158EC6 transparent transparent;
        right: 5px;
        top: 8px;
        z-index: 3;
    }
    
    .sel {
        width: 96%;
        height: 32px;
    }

html部分

    

        

            
        
        

            
        
        

            
        
        

            
        
        

            选项一
            选项二
        
        

            选项一
            选项二
            选项三
        
        

            
                
                    -请选择职业-
                    前端攻城狮
                    程序猿
                    美工