最近做项目,经常遇到要使用单选按钮和多选按钮。我们都知道,input单选按钮和多选按钮本身有自带的样式,而且在不同的浏览器中显示的样式都不一样。美观程度就更不用说了,所以需要我们自定义input的样式。
那么如何来实现呢?
利用 label 标签和 input 标签关联,通过给label设置样式,再利用css3的伪类选择器:checked 来改变label标签的样式,可以达到点击input的样式切换效果。(注意:IE8以下版本不支持。)
好了,废话不多说了,直接上代码:
HTML
CSS
label的样式大家可以自由设置,关键点在于让input的checked状态与label的样式也关联上。
以上方法怎么样呢?赶紧打开电脑尝试一下吧!如果觉得本文对您有帮助,赶快动动您勤劳的小手,分享给更多需要它的人。