Bootstrap在未显示占位符时选择标签

Question

在浮动标签的示例页面中，有一个标签选择器，用于何时未显示占位符：

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: calc(var(--input-padding-y) / 3);
  padding-bottom: calc(var(--input-padding-y) / 3);
  font-size: 12px;
  color: #777;
}

此选择器基于此HTML结构：

<div class="form-label-group">
   <input type="email" id="inputEmail" class="form-control" placeholder="Email">
   <label for="inputEmail">Email</label>
</div>

我有一个带有输入的标签，在这个结构中：

<div id="" class="form-label-group ">
   <div class="form-before-field">
   </div>
   <div class="form-field">
      <div id="form-wrap" class="field-wrap" data-field-id="1">
         <div class="field-label">
            <label for="field-1" class="">Name </label>
         </div>
         <div class="field-element">
            <input type="text" value="" class="forms-field form-control" placeholder="Name" id="field-1" name="field-1" aria-invalid="false" aria-describedby="error-1">
         </div>
      </div>
   </div>
   <div class="after-field">
      <section>
      <div class="input-limit"></div>
      <div id="error-1" class="error-wrap error" role="alert"></div>
      </section>
   </div>
</div>

当占位符未显示时，我应该使用哪个选择器来定位标签？

Answer 1

具体问题：

由于您的HTML结构，您需要退出<div class="field-element">，然后找到之前的<div class="field-label">。遗憾的是，CSS中 parent selector 'previous' selector :empty 。因此，使用纯CSS来定位<label>基于占位符的<input>是不可能。

说了这么多，我也会在这个问题上留下更通用的方法，因为这实际上是一个相当普遍的要求，而且我确信有人会用更传统的方式绊倒这个问题结构：）

基于<label>占位符的<input>的常规定位：

您可能认为可以使用简单的 <input> 伪类，但不幸的是，情况并非如此。这是因为 void element 是:placeholder-shown，因此内容模型始终为空。

目前唯一纯粹的CSS方法是使用 :not 伪类。当占位符不存在时，可以与 <label> 结合使用，以定位<input>元素。

要定位相应的 adjacent sibling combinator (+) ，您可以将其与 not supported 结合使用，以定位输入后立即生成的标签。< / p>

总而言之，您正在寻找：

input(:placeholder-shown) + label

可以在以下内容中看到：

＆＃13;

＆＃13;

input + label {
  display: none; /* Hidden by default for the sample */
}

input:not(:placeholder-shown) + label {
  display: block;
}

＆＃13;

<input id="email" placeholder="Email">
<label for="email">Placeholder Not Shown!</label>

＆＃13;

＆＃13;

＆＃13;

但请注意，:placeholder-shown目前在Internet Explorer或Edge中为{{3}}。在这些浏览器添加对:placeholder-shown的支持之前，您将被迫使用JavaScript解决方案。