checkbox、radio设置自定义样式

  老生常谈,做一个简单的记录。浏览器自带的checkbox和radio样式可能不符合项目要求,通常要做一些自定义样式设置,目前基本的解决思路都是将input[type=checkbox/radio]隐藏,用label去与input做联动处理,具体实现方法有以下两种:

 1 
 2 
 3 
 4 
 5     
 6     
 7     
 8     
34     checkboxAndRadio
35 
36 
37 
38     
方法1
39 40
41
方法2
42 43 44 49 50 51

  第一种方式必须要设置元素id,如果表单过多将导致命名很纠结;第二种可以简单的写一个事件监听,去动态改变checkbox的选中状态,以此来达到动态切换的目的。在利用框架进行开发应用时,只需要进行简单的封装即可使用,radio实现同上,效果图如下:

 

你可能感兴趣的:(checkbox、radio设置自定义样式)