从输入类获取标签

Question

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

有一种方法可以从类.notEmpty中获取输入标记的标签吗？

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

Answer 1

你可以试试这样的小事：

label{
  float: left;
  margin-right: 10px;
}

.notEmpty + label::after{
  content: '*';
}

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

Answer 2

您可以创建所需的字段，然后使用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