自定义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
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券