选中输入后的文本css选择器

Question

如果检查了输入，我正在尝试在输入后使文本粗体，但我失败了。我想我找不到短信了。我很感激任何帮助或暗示。

​

input[type="radio"]:checked+ {
  font-weight: bold;
}

<label for="radio-foobar">
  <input type="radio" id="radio-3" value="3" />
  Hello world!
</label>

​

Answer 1

focus-within和转换黑客可以近似地实现这一点。转换的目的是确保即使单击“外部”也保留样式。

​

label {
  font-weight: 400;
  transition:0s 999s;
}

label:focus-within {
  font-weight: 900;
  transition:0s;
}

<label for="radio-3">
  <input type="radio" id="radio-3" value="3" >
  Hello world!
</label>

​

Answer 2

在html上，需要将Hello World!覆盖到<span>这样的html标记中，而在checked上，您可以使用+ CSS选择器选择checked输入旁边的范围。

​

input[type="radio"]:checked + span {
  font-weight: bold;
}

<label for="radio-foobar">
  <input type="radio" id="radio-3" value="3" />
  <span>Hello world!</span>
</label>

​