很多时候，我们都会用到radio，但是又觉得它默认的样式不好看，所以就需要我们自己来进行修改；
1、首先写一个input;
这是它原本的样式。
2、下面进行改变；
css样式
p{position: relative; } .circle-btn{ display: inline-block; position: absolute; top:2px; border:1px solid rgb(192,192,192); border-radius: 50%; width: 16px; height: 16px; } input.radio[type='radio']{ opacity:0; top:0; left: -4px; display:inline-block ; height: 18px; width: 18px; z-index: 100; vertical-align: middle; position:absolute; }input.radio[type='radio']:checked+.radio{ background: url("img/xb2.png")0 -140px no-repeat ; } label.radio{ font-size:14px; display: inline-block; /*background: url("img/little.png") -17px -383px no-repeat; */ height: 16px; padding-left: 30px; position: relative; vertical-align: middle; line-height: 16px; }
实际上就是把原来的input隐去，再自定义一个spa设置它宽高和背景色；
注意：在写span时一定要跟input位置对齐，不然会出现不能点击的情况；
。好了，这就是个完整的例子，大家可以试下。
下面是用到的雪碧图：xb2.png
文章图片
【jquery|单选按钮radio样式的改变】
推荐阅读
- JavaScript|Jquery对象、Jquery选择器、Jquery Dom操作及事件
- jQuery基础|jQuery的基础操作
- 针对 jQuery 的优化方法有哪些
- javascript|关于input的change事件触发多次发解决
- jquery Colorbox 传值
- Jquery 操作 Frame示例
- 代码记录|jquery获取select框的值、单选框的值、textarea的值、获取input框的值
- jQuery Infinite Ajax Scroll(ias) 分页插件介绍
- jQuery|jQuery 基础教程目录