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样式的改变

推荐阅读

梳妆台摆放有哪些风水要注意风水学梳妆台摆放

老松下变频空调质量怎么样1.5匹,实际上与普通无异

李时珍巧释鸡屎丸子

程序员分析流程图,HAZOP分析流程图

支付宝健康果怎么领取_支付宝领取健康果图文方法介绍

2022武汉欢乐谷万圣节是几号到几号结束

尼康D700怎么拍月亮尼康d7200怎么拍月亮

大象怎么画

如何有效治疗肩周炎？

redis在java中的用法 redis纯java实现

Linux 怎么修改最大文件打开数量（）

一吐乌气是什么意思

grafana

跨境电商财务会计是干什么的啊跨境电商财务会计是干什么的，跨境电商财务会计是干什么的工作

cpu冷头是什么，cpu冷头进出水孔怎么区分

杭州哪家公立医院医美最好杭州哪个整形好

快乐玻璃杯第270关怎么过快乐玻璃杯第270关攻略

分析师|分析师：iPhone 13在中国预购量已经接近600万大关，超级周期将持续到2022年

时延估计方法的分析

芝麻油菜——润肠排毒补血明目