输入后检查文本的css选择器 [英] css selector for text after checked input

问题描述

如果输入被选中，我试图将输入后的文本设为粗体，但失败了.我认为我没有找到文字.感谢您的帮助或提示.

I am trying make the text after input bold if input is checked but I am failing. I think my is not finding the text. I appreciate any help or hint.

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

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

推荐答案

focus-within 和过渡技巧可以对此进行近似.过渡是确保即使您在外部单击也可以保留样式.

focus-within and a transition hack can approximate this. The transition is to make sure the style is kept even if you click outside.

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>

这篇关于输入后检查文本的css选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！