选中输入[重复]后文本的css选择器

提问者：小点点

我正在尝试使输入后的文本加粗，如果输入被选中，但我失败了。我想我没有找到文本。我很感激任何帮助或暗示。

null

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

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

null

共2个答案

匿名用户

focus-within和一个转换黑客可以近似于此。过渡是为了确保即使您单击外部，样式也被保留。

null

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>

匿名用户

在html中，需要将Hello World！覆盖到html标记中，如，而在CSS中，您可以使用+CSS选择器选择checked输入旁边的span。

null

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>