Question

是否可以通过css选择器选择周围的标签？

我在wordpress插件中有以下内容。

  <label class="radio-inline" data-label="fach" for="fld_1266424_1_opt1107649">

     <input type="radio" id="fld_1266424_1_opt1107649" data-field="fld_1266424" class="fld_1266424_1 option-required user-success" name="fld_1266424" value="40" required="required" aria-required="true" aria-invalid="false">

        <span>Fach4</span>

 </label>

现在我想创建不正常的单选按钮。它应该看起来像一个普通的按钮，所以我添加了填充，背景颜色等。但我有一个问题，我不能为标签创建一个检查样式。因为这是 - 肯定 - 不工作

input[type="radio"]:checked label

检查收音机输入时是否可以设置标签样式而不触摸html表单？

谢谢！

Answer 1

你可以，但只有你让你的HTML看起来像这样：

由于标签中包含for属性，因此如果您点击标签，将会检查radio button。

input[type="radio"]:checked+label {
  color: red;
  margin: 30px;
}

<input type="radio" id="fld_1266424_1_opt1107649" data-field="fld_1266424" class="fld_1266424_1 option-required user-success" name="fld_1266424" value="40" required="required" aria-required="true" aria-invalid="false">
<label class="radio-inline" data-label="fach" for="fld_1266424_1_opt1107649">
  Radio button

</label>

选择输入类型无线电CSS周围的标签

1 个答案: