select,radio,checkbox的美化

一   對select的美化

select{
    -webkit-appearance:none;
    appearance:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

     該樣式會將其右側的倒三角去掉，以及會修改手機上select的樣式

 

二   對radio以及checkbox的美化(兩種方法)

      1   第一種方法

     html：

        <div class="radio_box"> 
            <label for="teacher">
                <input type="radio" name="job" id="teacher" value="teacher">教師<i></i>
            </label>
            <label for="student">
                <input type="radio" name="job" id="student" value="student">學生<i></i>
            </label>
            <label for="farmer">
                <input type="radio" name="job" id="farmer" value="farmer">農民<i></i>
            </label>
        </div>
        <div class="checkbox_box">
            <label for="admin">
                <input type="checkbox" id="admin" value="admin">管理員<i></i>
            </label>　
        </div>

 

 

css

.radio_box label,.checkbox_box label{
    position: relative;
}
input + i {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
}
input[type=radio]{
    -webkit-appearance:radio;
    appearance:radio;
}
input[type=checkbox]{
    -webkit-appearance:checkbox;
    appearance:checkbox;
}
input[type=radio] + i{
    background: url(imgs/radio.png) no-repeat;
}
input[type=radio]:checked + i{
    background: url(imgs/radio_check.png) no-repeat;
}
input[type=checkbox] + i{
    background: url(imgs/checkbox.png) no-repeat;
}
input[type=checkbox]:checked + i{
    background: url(imgs/checkbox_check.png) no-repeat;
}

 

       (其中定位的誤差根據圖片的大小自行調整）

2  第二種方法　　

            magic-check.css的使用(github連接）

　　　　載入該css文件

 　　　　而後在input元素上加上css類magic-checkbox或者magic-radio就能夠

<div class="radio_box">
    <input class="magic-radio" type="radio" name="radio" id="r1"> 
    <label for="r1">男士</label> 
</div>
<div class="check_box">
    <input class="magic-checkbox" type="checkbox" name="layout" id="c1"> 
    <label for="c1">女士</label> 
</div>