jquery|单选按钮radio样式的改变 jquery|jquery

很多时候，我们都会用到radio，但是又觉得它默认的样式不好看，所以就需要我们自己来进行修改；
1、首先写一个input;

European and USA European and European USA

这是它原本的样式。
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样式的改变】

jquery|单选按钮radio样式的改变

推荐阅读

什么是对公负债业务

做生鲜电商需要办什么营业执照

威能壁挂炉代码百度如何解决

拍鸟用什么相机好

荒野行动物品怎么拆分如何分开扔掉道具

黄雅琼个人资料介绍黄雅琼个人资料介绍

怎样做稻谷酒

天山雪菊哪里买天山雪菊多少钱才能买到

鹅蛋和什么东西不能吃

电池容量|骁龙870基本“零差评”，这四款价格两千左右，入手用三年

mongodb数据库迁移到另一台服务器 mongodb 迁移数据

紫叶草怎么种植紫叶草怎么养

补办车牌号一般几天可以下来

3m汽车膜分几个档次汽车贴膜什么牌子好

前端|实习生 Git 不熟练，还没脸去问是种什么体验

开发转数据分析,数据分析好还是大数据开发好

熊童子多肉服盆的注意事项有哪些多肉熊童子用什么盆好看

地板出汗怎么办地板如何去汗，地板如何去汗渍

冠状沟白色污垢是什么

mysql中的锁指的是什么 mysql导致锁的原因