如何在不使用ID的情况下，选中radio时改变label边框颜色？

当<label>内部的单选框（radio）被选中时，修改该<label>的边框颜色，禁止使用ID。

目前已经实现了基础样式，但尝试以下两种CSS写法都没达到预期效果：
1.

input[type="radio"]:checked + label{
    border-color: #20c997;
}

.selectable:checked {
    border-color: #20c997;
}

希望尽量只修改CSS，或者最小程度调整HTML（仅添加类，不用ID），单选框选中后预期效果为label边框变为#20c997色。

现有完整代码如下：

现有CSS代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif
}

body {
    height: 100vh;
    padding: 10px
}

.selectable {
    display: flex;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #ddd;
}

.selectable:active {
    border: 1px solid #0d6efd;
}

.selectable:hover {
    background: #20c997;
}

input[type='radio'] {
    width: 22px;
    height: 22px;
    margin-right: 10px;
}

input[type='radio']:before {
    content: '';
    display: block;
    width: 60%;
    height: 60%;
    margin: 20% auto;
    border-radius: 50%;
}

input[type="radio"]:checked:before {
    background: #20c997;
}

input[type="radio"]:checked {
    border-color: #20c997;
}

现有HTML代码 #

<label class="selectable">
    <input type="radio" name="selectable">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, impedit.</span>
</label>
<label class="selectable">
    <input type="radio" name="selectable">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, impedit.</span>
</label>
<label class="selectable">
    <input type="radio" name="selectable">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, impedit.</span>
</label>
<label class="selectable">
    <input type="radio" name="selectable">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, impedit.</span>
</label>

先说说之前两种写法失效的原因：

• 第一种写法用了兄弟选择器+，但input是label的子元素，不是同级元素，所以根本匹配不到label。
• 第二种写法给label加:checked伪类，但:checked只对表单元素生效，label不是表单控件，自然不会有效果。

方案一：仅修改CSS（现代浏览器适用） #

利用CSS的:has()伪类，直接选中包含选中状态radio的label，这是最简洁的方案：

.selectable:has(input[type="radio"]:checked) {
    border-color: #20c997;
}

把这段代码加到现有CSS里就行，完全不用改HTML。

方案二：兼容旧浏览器（小改HTML+CSS） #

如果要支持不兼容:has()的旧浏览器，可以用:focus-within伪类：

1. 给所有radio加个类（比如radio-input），HTML修改如下：

<label class="selectable">
    <input type="radio" name="selectable" class="radio-input">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, impedit.</span>
</label>
<!-- 剩下的3个label也按同样方式添加class -->

2. 添加以下CSS：

.selectable:focus-within {
    border-color: #20c997;
}
/* 可选：隐藏radio默认的焦点框，避免视觉干扰 */
.radio-input:focus {
    outline: none;
}

当radio被选中时，label会触发:focus-within状态，边框颜色随之改变。

可选优化：调整hover样式 #

原hover时直接把背景改成#20c997，和选中状态的边框颜色容易混淆，建议改成浅一点的半透明色：

.selectable:hover {
    background-color: rgba(32, 201, 151, 0.1);
}

内容的提问来源于stack exchange，提问作者nlblack323