尚武科技——负责任的企业公民

电话

电话咨询

pHONE CONSulTING

0311-83796180

QQ

在线咨询

ONliNE CONSulTING
百度商桥
科技以人为本
尚武旗下网站
尚武科技
搜索图标
Sitemap | Mail | 合作答疑 | 招贤纳士
网站公告

尚武科技春节放假公告    2024-02-03

尚武科技服务热线:0311-
 83796180
   
我们是谁  |  企业文化  |  新闻动态  |  加入我们  |  行业知识
input单选按钮样式如何修改

  

  前言:

  在表单单选按钮开发过程中,我们肯定会感觉原生的radio太丑而且在ios端会出现看不清的原因。我们本着百分之百还原设计图的原则需要在radio的基础上进行修改。接下来就由石家庄网站建设工程师为大家详细介绍。

 

  原理:

  将label 的for和radio的id 关联到一起,关联到一起就可以到达和radio一样的效果同时也可以修改css样式进行美化,(必须关联到一起要不然会出现点击无效的BUG)这样式部分就可以做很多事情了,首先需要将他们的父级做相对定位,再将label绝对定位到radio上面,最好再给input设置成display:none;就可以实现。

石家庄网站建设

  实现:

  首先设置HTML页面,刚才我们说到将label 的for和radio的id 关联到一起,我准备采用flex布局所以在最外层添加了一层。其实做到这里其实已经实现了就是看不出来效果。

石家庄网站建设

  css部分:最外层的容器需要设置 display:flex;确保子元素在一行 align-items: center; 确保子元素在水平居中(如果有朋友对弹性盒子不了解的话,后面会出一期单独讲弹性盒子的)

石家庄网站建设

  外层设置position: relative;

石家庄网站建设

  label 需要设置 position: absolute;属性 盖到 radio的上面做到模拟点击效果

石家庄网站建设

  重点来了!我们需要radio的checked和label的属性设置到一起。

石家庄网站建设

  这样我们的效果就出来了,间距和字体字号我在这里就不多赘述了。

石家庄网站建设

  总结重点:

  1.将label 的for和radio的id 关联到一起

  2.label 需要设置 position: absolute;属性 盖到 radio的上面做到模拟点击效果

  3.我们需要radio的checked和label的属性设置到一起

  4.自定义修改没有选中状态修改label样式,选中状态同时修改radio checked + label:after

 

  以上关于input单选按钮样式修改均属石家庄网站建设工程师的个人观点,大家如果对此有着不同的见解,可以关注公众号“尚武科技派”给我留言,大家可以交流一下自己的心德体会,共同学习进步。

 




上一篇:网页设计中如何才能做到用户想点击的banner图?             下一篇:网站建设中Apache无法启动问题完美解决

标签:石家庄网站建设
尚武科技
推荐阅读
睿亿网络用心服务的团队,竭诚为您服务 客服不能及时回复您,您可点击QQ进行交谈
欲了解业务详情,请拨打咨询热线:
值班电话:15512183667
在线服务: 尚武科技售前专员   
合作答疑 |  企业邮箱 |  关于我们 |  联系我们 |  版权声明 |  会员中心 |  友情链接 |  免责声明
Copyright © 2008-2019 尚武科技 保留所有权利 >冀ICP备07012169号    Copyright © 2008 www.sw-tech.cn, Inc. All rights reserved