学习
实践
活动
专区
工具
TVP
写文章

自定义inputtype=radio的样式

最近做项目,经常遇到要使用单选按钮和多选按钮。我们都知道,input单选按钮和多选按钮本身有自带的样式,而且在不同的浏览器中显示的样式都不一样。美观程度就更不用说了,所以需要我们自定义input的样式。

那么如何来实现呢?

利用 label 标签和 input 标签关联,通过给label设置样式,再利用css3的伪类选择器:checked 来改变label标签的样式,可以达到点击input的样式切换效果。(注意:IE8以下版本不支持。)

好了,废话不多说了,直接上代码:

HTML

CSS

label的样式大家可以自由设置,关键点在于让input的checked状态与label的样式也关联上。

以上方法怎么样呢?赶紧打开电脑尝试一下吧!如果觉得本文对您有帮助,赶快动动您勤劳的小手,分享给更多需要它的人。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180601G0VEQH00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券