Javascript CSS高亮显示选定按钮

我正在尝试为应用程序引入的代码设计样式，因此我没有能力调整HTML

我的目标是将单选按钮输入变成一个隐藏单选选项的可点击按钮。到目前为止，我已经完成了这项工作，只是突出显示了选中的按钮。当选中单选按钮时，我似乎不知道如何定位标签，因为它是输入的父项

我曾尝试使用CSS和jQuery来定位标签，但两者都不起作用

$（文档）.ready（函数（）{
$（“.bold_选项标签”）。单击（函数（）{
$（“.bold_选项标签”）.removeClass（“选定”）；
$（此）.addClass（“选定”）
})
})

.bold\u选项输入[type=“radio”]{
显示：无；
}
.bold_选项标签{
显示：内联块；
浮动：左；
最小宽度：36px；
高度：$sw高度；
/*它们之间没有额外的间距*/
保证金：0；
/*设置文本样式*/
字体大小：13px；
文本对齐：居中；
线高：$sw高度；
空白：nowrap；
文本转换：大写；
不透明度：0.8；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：正常；
边框：2个实心#C0C2BF！重要；
背景色：{
{
settings.color\u样例\u btn
}
}
;
颜色：{
{
settings.color\u样例\u文本
}
}
;
背景位置：中心；
填充：0 10px；
}
.选定{
轮廓颜色：透明；
边框：2px实心#F9DDD2！重要；
字号：600；
}

手撕边

基于此：我的目标是将单选按钮输入变成隐藏单选选项的可点击按钮。我想这就是你想要的：

$（文档）.ready（函数（）{
$（“.bold_选项_值_元素”）.parent（）.hide（）；
$（“.bold_选项_值”）.append（'DECKLE手撕边'）；
$（“.something”）。单击（函数（）{
警报（“您单击了新按钮”）；
})
})

.bold\u选项输入[type=“radio”]{
显示：无；
}
.bold_选项标签{
显示：内联块；
浮动：左；
最小宽度：36px；
高度：$sw高度；
/*它们之间没有额外的间距*/
保证金：0；
/*设置文本样式*/
字体大小：13px；
文本对齐：居中；
线高：$sw高度；
空白：nowrap；
文本转换：大写；
不透明度：0.8；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：正常；
边框：2个实心#C0C2BF！重要；
背景色：
背景位置：中心；
填充：0 10px；
}
.选定{
轮廓颜色：透明；
边框：2px实心#F9DDD2！重要；
字号：600；
}

手撕边

看看这个。我只需要更改类名

$（文档）.ready（函数（）{
$（“.bold_选项_值标签”）。单击（函数（）{
$（“.bold_选项_值标签”）.removeClass（“选定标签”）；
$（此）.addClass（“选定标签”）
})
})

.bold\u选项\u值输入[type=“radio”]{
显示：无；
}
.粗体选项值标签{
显示：内联块；
浮动：左；
最小宽度：36px；
高度：$sw高度；
/*它们之间没有额外的间距*/
保证金：0；
/*设置文本样式*/
字体大小：13px；
文本对齐：居中；
线高：$sw高度；
空白：nowrap；
文本转换：大写；
不透明度：0.8；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：正常；
边框：2个实心#C0C2BF！重要；
背景颜色：浅蓝色；
颜色：深蓝色；
背景位置：中心；
填充：0 10px；
}
label.selected-label{
轮廓颜色：透明；
边框：2px实心#F9DDD2！重要；
字号：600；
}

手撕边
其他边缘

您不能仅通过css影响父节点的样式。（对于目标父项，没有与之等价的

）。因此，必须是js解决方案。您正在添加和删除

选定的

，但您的css用于

选定的标签