css - 从输入类中获取标签

Question

只有在需要输入时，我才必须在标签中插入“*”。

有没有办法从.notEmpty类中获取输入标签的标签？

<label for="foo">Foo</label>
<input class="notEmpty" id="foo">

Answer 1

您可以将字段设为必填，然后使用 input:valid 选择器在字段为空时显示星号。

标记:

<label for="foo">Foo</label>
<input class="text" id="foo" required="required">
<span class="star" style="visibility: visible;">*</span>

CSS:

.text:valid + .star { visibility: hidden!important; }

在此处查看可用的 CodePen:https://codepen.io/fennefoss/pen/aWpqqj