CSS中,标签是用来对页面中的单个文本进行格式化的。而单选框则是我们经常会用到的一种表单元素,用于在可选的选项中选择一个。
要想美化单选框的样式,我们可以通过CSS的伪元素来实现。在设置样式的时候需要结合文本标签和标签一起使用。
/* 使用伪元素before和after */ input[type="radio"] + label:before,input[type="radio"] + label:after { content: ""; position: absolute; top: 2px; left: 0; width: 18px; height: 18px; border-radius: 50%; } /* 未选中状态 */ input[type="radio"]:not(:checked) + label:before { border: 2px solid #aaa; } /* 选中状态 */ input[type="radio"]:checked + label:before { border: 2px solid #167ce2; } /* 禁用状态 */ input[type="radio"]:disabled + label:before { border: 2px solid #ccc; background-color: #f1f1f1; }
以上代码中,我们首先定义了before和after的样式,用来实现单选框的圆形标记。接着,我们通过伪类选择器来为不同状态下的单选框设置不同的样式。
值得注意的是,样式的设置需要结合
/* HTML代码 */选项一 选项二