我觉得解决这个问题很简单，但我在网上找不到。如果选择了单选按钮，我需要在单选按钮及其标签上显示边框。单选按钮代码例如:
<input type="radio" name="sex" class="sex" value="0">Male</input>
<input type="radio" name="sex" class="sex" value="1">Female</input>
如果选择 male 选项，则整个单选按钮和 Male 标签将被一个矩形包围。如果随后选择了 Female 单选按钮，则 Male 单选按钮的矩形将消失并变为 Female 单选按钮。但这只需要在 CSS 中完成。根本没有javascript。这可能吗？我认为答案可能与伪选择器有关，例如:
.sex {border: 0}
.sex:checked {border: 1 solid red;}
但这行不通。我做错了什么吗？谢谢。
最佳答案
输入不是那样工作的；他们没有内容，也没有结束标签。因此，在您的示例中，“男性”和“女性”这两个词本身并不是输入的一部分。
解决方案是使用<label>将单词放入其中的元素，并使用 for 将这些标签指向相应的输入属性。
<input type="radio" name="sex" class="sex" value="0" id="sex0"><label for="sex0">Male</label>
<input type="radio" name="sex" class="sex" value="1" id="sex1"><label for="sex1">Female</label>
然后你的 css 看起来像这样:
label {border: 0; padding-left:20px; margin-left:-20px;}
.sex:checked+label {outline: 1px solid red;}
我使用了轮廓而不是边框，以防止元素在被点击时被重排。
注意标签上的左填充和负左边距，使单选按钮看起来在标签中。这是必要的，因为单选按钮本身不能很好地响应 outline。属性(property)。
参见 JSFiddle .
关于html - 让单选按钮及其标签在选中时自动更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29443613/