基于 CSS3 的 input radio 和 checkbox 样式美化
网页交互设计中, input 元素的 radio (单选按钮) 和 checkbox (复选框) 常用于收集用户选择信息。 为提升视觉效果， 可利用 CSS3 对其进行样式美化。
CSS3 的新选择器和属性支持更精准的元素样式控制， 包括边框、 背景、 阴影、 过渡和动画等。 针对 input[type="radio"] 和 input[type="checkbox"], 可利用这些特性定制外观。 例如， 使用 :checked 伪类改变选中状态样式， 利用 ::before 和 ::after 伪元素创建自定义图标。
/*隐藏原生 input 元素*/
input[type="radio"], input[type="checkbox"] {
display: none;
}
/*创建自定义样式*/
input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
border: 2px solid #ccc;
background-color: #fff;
cursor: pointer;
}
/*改变选中状态*/
input[type="radio"]:checked + label::before,
input[type="checkbox"]:checked + label::before {
background-color: #007BFF;
border-color: #007BFF;
/*添加自定义图标，如勾选或圆圈*/
/*例如：使用 font-awesome 字体图标*/
content: 'f00c'; /*勾选图标*/
}
文件大小：1.33KB
评论区