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;
}

您也可以将输入outside放置在label上并使用其他CSS，但是您可能有理由这样做。

Answer 2

在下面检查更新的代码段...

label input:checked + span {
  border-color: red;
  font-weight: bold;
}

.btn-section-operation {
  display: grid;
}

<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"><span>Rows</span></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"><span>Rows with relations</span></label>
  </div>
</form>

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

2 个答案: