title: Bootstrap select the label when placeholder is not shown
body: <p>In the example page for the floating label, there is a label selector for when the place holder is not shown: </p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>this selector is based on this HTML structure: </p>
  
  <pre><code>&lt;div class="form-label-group"&gt;
     &lt;input type="email" id="inputEmail" class="form-control" placeholder="Email"&gt;
     &lt;label for="inputEmail"&gt;Email&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a label with input which is in this structure: </p>
  
  <pre><code>&lt;div id="" class="form-label-group "&gt;
     &lt;div class="form-before-field"&gt;
     &lt;/div&gt;
     &lt;div class="form-field"&gt;
        &lt;div id="form-wrap" class="field-wrap" data-field-id="1"&gt;
           &lt;div class="field-label"&gt;
              &lt;label for="field-1" class=""&gt;Name &lt;/label&gt;
           &lt;/div&gt;
           &lt;div class="field-element"&gt;
              &lt;input type="text" value="" class="forms-field form-control" placeholder="Name" id="field-1" name="field-1" aria-invalid="false" aria-describedby="error-1"&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="after-field"&gt;
        &lt;section&gt;
        &lt;div class="input-limit"&gt;&lt;/div&gt;
        &lt;div id="error-1" class="error-wrap error" role="alert"&gt;&lt;/div&gt;
        &lt;/section&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>what selector should I use to target the label when the place holder is not shown?</p>