标签：16px get font rgba target 教师 nbsp ack code
一 对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>
标签：16px get font rgba target 教师 nbsp ack code
原文地址：http://www.cnblogs.com/-bingyan/p/7414252.html
