前端的小玩意（4）自定义checkbox或者radio的外观

通过隐藏原有的（调透明度和绝对定位），然后用一个新的图标来覆盖上去

CSS代码：

 .radio { /*这个描述的是输入框的基本样式，透明，绝对定位，浮动在最下*/

 opacity: 0;

 position: absolute;

 z-index: -1; /*这行是让原图标被其他的遮挡，避免挡住其他按钮影响事件触发*/

 span /* /span overflow: auto;

 我自己试验后感觉这两行代码并没有必要 */

 .radio[type=checkbox] + span { /*如果类型是radio，那么这里就是type=radio，当然不写也可以。+span表示这个元素后的第一个span元素*/

 display: inline-block; /*因为需要写span元素的大小*/

 height: 20px; /*图标的大小*/

 width: 20px;

 background-image: url(01.png); /*未选中时的图标*/

 background-position: center; /*把背景图放在元素的中间显示*/

 position: relative; /*相对定位*/

 top: 3px; /*可能需要根据实际情况来调整位置*/

 left: 5px;

 .radio[type=checkbox]:checked + span { /*选中时的样式*/

 background-image: url(02.png);

 }

 label 

 input type="checkbox" name="TableChecked"/ 

 span /span 

 span 选择磁盘 /span !--这个是描述这个checkbox的label内容-- 

 /label