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部分

<div class="wrap">
    <div class="frm">
        <p>
            <input type="text" placeholder="文本" class="ipt" />
        </p>
        <p>
            <input type="number" placeholder="数值" class="ipt" />
        </p>
        <p>
            <input type="tel" placeholder="手机号" class="ipt" />
        </p>
        <p>
            <input type="mail" placeholder="邮箱" class="ipt" />
        </p>
        <p>
            <input type="radio" name="rad" id="" class="rad" />选项一
            <input type="radio" name="rad" id="" class="rad" />选项二
        </p>
        <p>
            <input type="checkbox" name="chk" id="" class="chk" />选项一
            <input type="checkbox" name="chk" id="" class="chk" />选项二
            <input type="checkbox" name="chk" id="" class="chk" />选项三
        </p>
        <p>
            <span class="selWrap">
                <select name="" id="" class="sel">
                    <option value="0">-请选择职业-</option>
                    <option value="1">前端攻城狮</option>
                    <option value="2">程序猿</option>
                    <option value="3">美工</option>
                </select>
            </span>
        </p>
    </div>
</div>