当前位置: 首页 > Web前端 > CSS

自定义输入复选框或单选框的样式

时间:2023-03-30 23:47:11 CSS

浏览器自带的单选按钮和多选框的样式比较简单,我们经常需要改变它们的样式。HTML

这是一个单选按钮
键:1.标签的for属性绑定输入框的id属性,这样点击标签的时候,输入单选按钮也被点击了(标签具有输入的点击性质)2.此时,输入框可以隐藏,把所有的样式写到标签上,做一个假的单选按钮样式CSS/*hideinput*/input[type="radio"]{display:none;}/*labelvirtualselectorto添加单选按钮未点击状态样式*/input[type="radio"]+label:before{background:url(../images/radio-check-out.png);}/*label虚拟选择器添加单选buttonclickstatestyle*/input[type="radio"]:checked+label:before{background:url(../images/radio-check-in.png);}/*radio状态的显示盒子完成样式*/Effect