css单选框被选中 |css表格列颜色不同颜色不同颜色不同颜色不同颜色

在CSS中，大家可以对被选中的单选框应用特定的样式，这样用户就能够清楚地知道他们当前选择的选项。

input[type="radio"]:checked {
border: 1px solid #007aff;
background-color: #007aff;
color: #fff;
}

这段代码会将被选中的单选框的边框颜色、背景色和文字颜色修改为大家所定义的样式，使其与其他单选框有明显的区别。

除了修改单选框的样式，大家也可以利用:checked伪类在DOM中操作其他元素。例如，当用户选择一个单选框时，大家可以在页面中显示相应的内容：

input[type="radio"]:checked ~ .content {
display: block;
}

这段代码会将class为“content”的元素的display属性修改为block，使其在页面中展示出来。用户只需单击单选框，就能看到相应内容的展示和隐藏。

使用CSS修改单选框的样式和操作DOM元素的方法，可以增加用户体验，提高页面的可操作性。