select,radio,checkbox的美化

Posted 2020-10-04 _冰雁

一   对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" id="teacher" value="teacher">教师<i></i>
    </label>
    <label for="student">
        <input type="radio" id="student" value="student">学生<i></i>
    </label>
    <label for="farmer">
        <input type="radio" 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{
    position: relative;
}
input[type=radio]{
    -webkit-appearance:radio;
    appearance:radio;
}
input[type=radio] + i{
    position: absolute;
    top: 0px;
    left: -10px;
    background-image: url(../img/radio.png);
}
input[type=radio]:checked + i{
    position: absolute;
    top: 0px;
    left: -10px;
    background-image: url(../img/radio_check.png);
}
.checkbox_box label{
    position: relative;
}
input[type=checkbox]{
    -webkit-appearance:checkbox;
    appearance:checkbox;
}
input[type=checkbox] + i{
    position: absolute;
    top: 0px;
    left: -10px;
    background-image: url(../img/checkbox.png);
}
input[type=checkbox]:checked + i{
    position: absolute;
    top: 0px;
    left: -10px;
    background-image: url(../img/checkbox_check.png);
}

       (其中定位的偏差根据图片的大小自行调整）

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>