如何保持单选按钮选中态的蓝色边框效果并调整价格布局？

当前代码用:focus伪类添加蓝色边框，点击页面其他区域失去焦点后边框就会消失。要让边框在切换选项前始终保留，需要结合:checked伪类（对应Radio的选中状态）来设置样式：

修改原CSS中的焦点规则，补充选中状态的样式：

.radio-custom:focus + .radio-custom-label,
.radio-custom:checked + .radio-custom-label {
    outline: 1px solid blue;
    width: 50%;
}

这样Radio选中时，对应的label会一直显示蓝色边框，直到切换到另一个选项。

给.radio-custom-label添加Flex布局，就能轻松实现产品名称左对齐、价格右对齐的效果：

修改.radio-custom-label的CSS：

.radio-custom-label {
    background: #f4f4f4;
    width: 50%;
    /* 添加Flex布局属性 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px; /* 可选：添加内边距避免内容贴边 */
}

如果不想用space-between，也可以单独给价格Span设置margin-left: auto，同样能把价格推到右侧：

.radio-custom-label span {
    margin-left: auto;
}

.checkbox-custom,
.radio-custom {
    opacity: 0;
    position: absolute;
}

.checkbox-custom,
.checkbox-custom-label,
.radio-custom,
.radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.checkbox-custom-label,
.radio-custom-label {
    position: relative;
    background: #f4f4f4;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}

.checkbox-custom + .checkbox-custom-label:before,
.radio-custom + .radio-custom-label:before {
    content: '';
    background: #fff;
    border: 2px solid #000;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
    background: rebeccapurple;
    box-shadow: inset 0px 0px 0px 4px #fff;
}

.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
    margin: 10px;
}

.radio-custom:checked + .radio-custom-label:before {
    background: #000;
    box-shadow: inset 0px 0px 0px 4px #fff;
}

.checkbox-custom:focus + .checkbox-custom-label,
.radio-custom:focus + .radio-custom-label,
.radio-custom:checked + .radio-custom-label {
    outline: 1px solid blue;
    width: 50%;
}

HTML代码无需修改，保持原结构即可。

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