css单选按钮叫什么

在前端开发中，单选按钮是一种常用的UI组件，它常常被用于表单的选择性操作。而CSS单选按钮，顾名思义就是使用CSS来实现单选按钮的样式及交互。

/* CSS 单选按钮样式 */
input[type="radio"] {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

/* 制作label标签样式 */
label {
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    background-color: #fff;
    border-radius: 4px;
    padding: 8px 14px;
    margin-right: 10px;
    cursor: pointer;
}

/* 选中状态下的label */
label.checked {
    border: 2px solid #007bff;
    Box-shadow: 0 0 0 2px #007bff;
}

/* 鼠标悬停在label上 */
label:hover {
    background-color: #f8f9fa;
}

/* 当单选按钮被选中后 */
input[type="radio"]:checked + label.checked {
    border: 2px solid #007bff;
    Box-shadow: 0 0 0 2px #007bff;
}

通过上面的CSS代码，我们可以看到，实现CSS单选按钮涉及到对input和label两个元素的样式设置。其中，input的opacity设为0，即隐藏单选按钮本身，而label可以理解为是单选按钮的可见部分。通过CSS对label的样式的设置，我们可以实现自定义的单选按钮样式。当然，在给label添加样式时，我们也需要通过选择器来让被选中的单选按钮与对应的label产生关联，以实现正确的交互效果。