input：not（：placeholder-shown）〜标签选择器不适用于自动填充 [英] input:not(:placeholder-shown) ~ label selector does not work with autofill

问题描述

我在输入字段中有浮动占位符。

I have floating placeholder in the input field.

当我们没有提供输入值时，占位符将出现在中心。如下图所示（电子邮件和密码为占位符）。

Placeholder will appear in center when we input value has not been provided. as shown in the below screenshot (Email and password is placeholder).

现在，当您提供电子邮件值时，它的确如下图所示。观察者，在提供值之后，电子邮件和密码已被拉起

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

当浏览器从页面加载时保存的凭据（例如用户名，电子邮件，密码等）开始自动填充/自动完成此值时，会发生问题。参见以下屏幕截图：

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:

css

: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 > input,
.form-label-group > label {
  padding: var(--input-padding-y) var(--input-padding-x);
}

.form-label-group > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` 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;
}

HTML

<form class="form-signin">
    <h1 class="h3 mb-3 font-weight-normal">Please Type new password</h1>
    <div class="form-label-group">
        <input type="text" id="inputEmail" [(ngModel)]="email" name="email" class="form-control" placeholder="Email" required=""
            autofocus="">
        <label for="inputEmail">Email</label>
    </div>

    <div class="form-label-group">
        <input type="password" id="inputPassword" [(ngModel)]="password" name="password" class="form-control" placeholder="Password"
            required="">
        <label for="inputPassword">Password</label>
    </div>

    <div class="row">
      <div class="col-sm-6">
        <button class="btn btn-lg btn-primary btn-block" (click)="onSubmit()" type="button">Change password</button>
      </div>
    </div>
</form>

我已经尝试过自动聚焦于电子邮件字段，但这没有用。
我也试图在页面加载后单击代码中的元素，但是没有运气。请帮我解决该问题。

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.

推荐答案

对我有用

.form-label-group input:-webkit-autofill ~ label {
        /* CSS property  */
}

您可以尝试

这篇关于input：not（：placeholder-shown）〜标签选择器不适用于自动填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！