单选框radio和复选框checkbox的样式更改：利用伪元素

2024-03-06 23:55| 来源: 网络整理| 查看: 265

首先要知道的是：单选框radio和复选框checkbox的样式本身是无法更改的，想要自定义样式，必须用到伪元素。

第一步：用span或者i标签来写单选框/复选框。把这个标签放在input的后面，并且用label将两者包裹起来。

黑名单模式我已同意《用户使用协议》和《隐私政策》

用label的原因是：包裹的两个元素会绑在一起，所以点击i元素的内容，也可以选中input框。

第二步：将i标签的样式写成单选框/复选框。

.radio i{ width: 12px; height: 12px; border: 0.5px solid #999; cursor: pointer; border-radius: 50%; display: inline-block; } .checkbox i{ display: inline-block; width: 20px; height: 20px; border: 0.5px solid #ccc; cursor: pointer; border-radius: 50%; vertical-align: middle; }

第三步：选中效果。利用伪元素来写选中后的样式，并把选中的样式通过定位或margin来和未选中时的样式结合起来。

.radio input:checked+i{ border-color: lightblue; } .radio input:checked+i::after{ content: ""; display: block; width: 7px; height: 7px; background: lightblue; margin-left: 2.5px; margin-top: 2.5px; border-radius: 50%; } .checkbox input:checked+i{ border-color: lightblue; } .checkbox input:checked+i::after{ display: block; content: "\2714"; text-align: center; border-radius: 50%; background: lightblue; color: #fff; font-size: 15px; padding-right: 3px; vertical-align: middle; }

第四步：将原来的单选框/复选框隐藏。

.radio input{ display: none; } .checkbox input{ display: none; }

运行结果：在这里插入图片描述完整代码：

练习 *{ margin: 0; padding: 0; } a{ text-decoration: none; } input{ outline: none; } .choose{ margin: 20px 50px; } .choose .radio{ padding-left: 20px; } .radio i{ width: 12px; height: 12px; border: 0.5px solid #999; cursor: pointer; border-radius: 50%; display: inline-block; } .radio input{ display: none; } .radio input:checked+i{ border-color: lightblue; } .radio input:checked+i::after{ content: ""; display: block; width: 7px; height: 7px; background: lightblue; margin-left: 2.5px; margin-top: 2.5px; border-radius: 50%; } .rule { margin: 20px 70px; } .checkbox i{ display: inline-block; width: 20px; height: 20px; border: 0.5px solid #ccc; cursor: pointer; border-radius: 50%; vertical-align: middle; } .checkbox input{ display: none; } .checkbox input:checked+i{ border-color: lightblue; } .checkbox input:checked+i::after{ display: block; content: "\2714"; text-align: center; border-radius: 50%; background: lightblue; color: #fff; font-size: 15px; padding-right: 3px; vertical-align: middle; } 黑名单模式白名单模式我已同意《用户使用协议》和《隐私政策》

【本文地址】

公司简介

联系我们