css多选一 |css 网站阴影

input[type="radio"]:checked {
/* 选项被选中时应用的CSS样式 */
}

在这个CSS规则中，使用了伪类:checked来选中被选中的单选框。为了限制只能选择一个选项，将所有选项都放在同一个表单中，并将它们分配给相同的名称，如下所示：

选项1
选项2
选项3

通过将它们分配给相同的名称，当用户选择其中一个选项时，其他选项都将自动取消选择，因为它们都属于同一个表单。

在CSS中，可将所有选项包装在容器中，并应用CSS样式来隐藏单选框自己的样式，如下所示：

.container {
display: inline-block;
position: relative;
cursor: pointer;
font-size: 16px;
line-height: 20px;
height: 20px;
}
.container input[type="radio"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
.container .checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
border: 1px solid #ccc;
border-radius: 50%;
}
.container:hover input ~ .checkmark {
background-color: #ccc;
}
.container input:checked ~ .checkmark {
background-color: #2196F3;
}

在这个CSS样式中，.container 类是包含选项的容器。它设置为inline-block，并带有一些附加的样式来使其外观像选项标签。.checkmark类表示伪装成选项自己的样式。它设置为绝对定位以覆盖原始单选框，并根据需要设置样式。最后，:hover和:checked伪类用于样式目标的不同状态。