可以通过使用不同的CSS类来激活单选按钮。以下是一个示例:
HTML代码:
CSS代码:
.btn {
display: none; /* 隐藏原始单选按钮 */
}
.btn1:checked + label {
/* 激活选项1时的样式 */
background-color: red;
}
.btn2:checked + label {
/* 激活选项2时的样式 */
background-color: green;
}
.btn3:checked + label {
/* 激活选项3时的样式 */
background-color: blue;
}
在上述代码中,我们通过给每个单选按钮添加不同的CSS类(.btn1
,.btn2
,.btn3
)来标识它们。然后,使用:checked
伪类选择器和相邻兄弟选择器(+
)来根据所选的单选按钮激活相应的标签,并为其应用不同的样式。
注意,我们使用label
标签来呈现自定义的单选按钮样式,并使用for
属性来与相应的单选按钮进行关联。
上一篇:不同的CSS边框属性值表现不同