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>