title: input:not(:placeholder-shown) ~ label selector does not work with autofill
body: <p>I have floating placeholder in the input field. </p>
  
  <p>Placeholder will appear in center when we input value has not been provided. as shown in the below screenshot (Email and password is placeholder).</p>
  
  <p><a href="https://i.stack.imgur.com/Yogdh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Yogdh.png" alt="enter image description here"></a></p>
  
  <p>Now when you provide the value to email it does look like below. Observer the Email and password has been pulled up when value has been provided</p>
  
  <p><a href="https://i.stack.imgur.com/X4rz7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/X4rz7.png" alt="enter image description here"></a></p>
  
  <p>The problem occurs when browser starts auto-filling/autocomplete this value from the saved credentials on page load like username, email, password so on. see the screen shot below:</p>
  
  <p><a href="https://i.stack.imgur.com/fBSvD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fBSvD.png" alt="enter image description here"></a></p>
  
  <p><strong>css</strong></p>
  
  <pre><code>:root {
    --input-padding-x: .75rem;
    --input-padding-y: .75rem;
  }
  
  html,
  body {
    height: 100%;
  }
  
  .form-signin {
    width: 100%;
    max-width: 600px;
    padding: 15px;
    margin: auto;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  
  .form-label-group {
    position: relative;
    margin-bottom: 1rem;
  }
  
  .form-label-group &gt; input,
  .form-label-group &gt; label {
    padding: var(--input-padding-y) var(--input-padding-x);
  }
  
  .form-label-group &gt; label {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    margin-bottom: 0; /* Override default `&lt;label&gt;` margin */
    line-height: 1.5;
    color: #495057;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: all .1s ease-in-out;
  }
  
  .form-label-group input::-webkit-input-placeholder {
    color: transparent;
  }
  
  .form-label-group input:-ms-input-placeholder {
    color: transparent;
  }
  
  .form-label-group input::-ms-input-placeholder {
    color: transparent;
  }
  
  .form-label-group input::-moz-placeholder {
    color: transparent;
  }
  
  .form-label-group input::placeholder {
    color: transparent;
  }
  
  .form-label-group input:not(:placeholder-shown) {
    padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
    padding-bottom: calc(var(--input-padding-y) / 3);
  }
  
  .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><strong>HTML</strong></p>
  
  <pre><code>&lt;form class="form-signin"&gt;
      &lt;h1 class="h3 mb-3 font-weight-normal"&gt;Please Type new password&lt;/h1&gt;
      &lt;div class="form-label-group"&gt;
          &lt;input type="text" id="inputEmail" [(ngModel)]="email" name="email" class="form-control" placeholder="Email" required=""
              autofocus=""&gt;
          &lt;label for="inputEmail"&gt;Email&lt;/label&gt;
      &lt;/div&gt;
  
      &lt;div class="form-label-group"&gt;
          &lt;input type="password" id="inputPassword" [(ngModel)]="password" name="password" class="form-control" placeholder="Password"
              required=""&gt;
          &lt;label for="inputPassword"&gt;Password&lt;/label&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-sm-6"&gt;
          &lt;button class="btn btn-lg btn-primary btn-block" (click)="onSubmit()" type="button"&gt;Change password&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I had already tried to autofocus on the email field but that did not worked.
  I also tried to click the element from the code after the page load but with no luck. Please help me how do I fix this.</p>