CSS怎样创建自定义单选框？input隐藏+label样式

<input type="radio">

<label>

input

<div class="radio-group">
    <input type="radio" id="optionA" name="choice" value="A">
    <label for="optionA">选项 A</label>

    <input type="radio" id="optionB" name="choice" value="B">
    <label for="optionB">选项 B</label>

    <input type="radio" id="optionC" name="choice" value="C">
    <label for="optionC">选项 C</label>
</div>

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: #f9f9f9;
}

/* 隐藏原始的单选框，但保持其可访问性 */
.radio-group input[type="radio"] {
    /* 
     * 这种隐藏方式比 display: none; 或 visibility: hidden; 更优，
     * 因为它允许屏幕阅读器和键盘导航仍然访问到元素。
     */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* 防止内容折行 */
    border: 0;
}

/* 样式化标签，使其看起来像一个自定义的单选框 */
.radio-group label {
    display: inline-flex; /* 允许内部元素对齐 */
    align-items: center; /* 垂直居中对齐 */
    cursor: pointer;
    font-size: 16px;
    color: #333;
    user-select: none; /* 防止文本被选中 */
    padding: 8px 0; /* 给文本一些垂直空间 */
}

/* 创建自定义的圆形外观 */
.radio-group label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%; /* 圆形 */
    margin-right: 10px; /* 与文本的间距 */
    background-color: #fff;
    box-sizing: border-box; /* 边框包含在尺寸内 */
    transition: all 0.2s ease-in-out; /* 平滑过渡 */
    flex-shrink: 0; /* 防止被挤压 */
}

/* 选中时的样式：外圈变色，并显示内点 */
.radio-group input[type="radio"]:checked + label::before {
    border-color: #007bff; /* 选中时边框颜色 */
    background-color: #007bff; /* 选中时背景色 */
}

/* 选中时的内点 */
.radio-group input[type="radio"]:checked + label::after {
    content: '';
    display: block;
    width: 10px; /* 内点大小 */
    height: 10px;
    border-radius: 50%;
    background-color: #fff; /* 内点颜色 */
    position: absolute; /* 相对于父级标签定位 */
    left: 7px; /* 调整位置使其居中 */
    top: 14px; /* 调整位置使其居中 */
    transform: translate(-50%, -50%); /* 精确居中 */
    /* 
     * 这里需要一个更巧妙的定位，因为::after是::before的兄弟元素，
     * 更好的做法是把::after放在::before内部，或者调整left/top相对于label。
     * 考虑到label::before已经有了，我们可以把内点放在label::before里面，
     * 或者让label::after相对于label定位，并调整其位置到::before的中心。
     * 
     * 修正：让内点基于::before来定位，这需要稍微调整CSS结构或使用嵌套的伪元素。
     * 最直接的方法是让::before作为容器，并在其内部通过伪元素创建内点，
     * 但CSS无法直接嵌套伪元素。所以，我们通常让::after也作用于label，
     * 然后调整其位置到::before的中心。
     */
    transition: all 0.2s ease-in-out;
    opacity: 1; /* 默认显示 */
}

/* 修正内点定位，使其更准确地在自定义圆圈内 */
.radio-group input[type="radio"]:checked + label::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    /* 相对于label定位，然后微调到::before的中心 */
    position: absolute;
    left: 12px; /* 2px border + 10px margin-right + 20px width / 2 - 10px / 2 = 7px */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%);
    opacity: 1;
    transition: all 0.2s ease-in-out;
}

/* 未选中时内点隐藏 */
.radio-group label::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: transparent; /* 默认透明 */
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0; /* 默认隐藏 */
    transition: all 0.2s ease-in-out;
}


/* 焦点样式：为键盘用户提供视觉反馈 */
.radio-group input[type="radio"]:focus-visible + label::before {
    outline: 2px solid #007bff; /* 蓝色轮廓 */
    outline-offset: 2px; /* 轮廓偏移 */
}

/* 鼠标悬停效果 */
.radio-group label:hover::before {
    border-color: #0056b3;
}

input

label

for

input

id

input

:focus-visible

position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);

input

display: none;

visibility: hidden;

label

for

input

id

label

input

id

for

!important

:checked

input

label

+

input

label

input[type="radio"]:checked ~ label

label

input