html - 选中单选按钮时如何设置粗体标签

Question

为什么这个设置的标签不是粗体？

      <form class="input-group">
<div class="btn-section-operation" id="btn-container-table">
    <label for="radio-selection-range-rows" class="radio-custom-label"><input class="radio-custom input-group-field" id="radio-selection-range-rows" name="radio-selection" type="radio" checked="checked">Rows</label>
    <label for="radio-selection-range-rel" class="radio-custom-label"><input class="radio-custom input-group-field" id="radio-selection-range-rel" name="radio-selection" type="radio">Rows with relations</label>
</div>

Codepen

Answer 1

您不应使用 label:checked，而应使用 input:checked 来选中复选框。此外，您使用同级选择器，但要设置样式的元素是父级(标签是输入的父级)。 CSS 中没有父选择器，所以我的解决方案是在文本周围使用 span。

<label for="radio-selection-range-rows" class="radio-custom-label">
    <input class="radio-custom input-group-field" id="radio-selection-range-rows" name="radio-selection" type="radio" checked="checked">
    <span>Rows</span>
</label>

然后像这样选择:

input:checked ~ span {
    border-color: black;
    font-weight: bold;
}

您也可以将输入放在外面 label 并使用其他 css，但您可能有理由这样做。