标签：style class blog code color com
input标签中radio和checkbox这标签的原生效果让人无力吐槽，实在太丑。
好在现在weibkit浏览器可以用
-webkit-appearance:none;
来改变自己的矮矬穷形象。
使用场景1：很多图片下方的点点点，这样做的好处是用JS设置一个点为选中只要将这个元素的checked设置为true即可，而且用鼠标点击也不需要另外写JS脚本。
简单版的CSS代码如下：
.radio{ width: 10px; height: 10px; -webkit-appearance: none; pointer-events: none; border-radius: 5px; display: inline-block; background-color: rgb(205,205,205); margin: 0 5px; } .radio:checked{ background-color: rgb(134,176,213); }
使用场景1：开关按钮，开关按钮可以用一张图片，然后设置其background-position-x属性左右移动。
简单版的CSS代码如下：
.checkbox{ -webkit-appearance:none; width: 100px;height: 30px; background-color: #fff; background-image: url(‘img/checkbox.png‘); background-repeat: no-repeat; } .checkbox:checked{ background-position-x: 100px; }
当然这个只是最简单的效果，还可以添加各种鼠标划过、鼠标点击、动画等效果。
Input Radio和Checkbox标签的高富帅用法,布布扣,bubuko.com
标签：style class blog code color com
原文地址：http://www.cnblogs.com/flywind2009/p/3806728.html
