我在输入字段中有浮动占位符。
当我们未提供输入值时,占位符将出现在中心。如下图所示(电子邮件和密码为占位符)。
现在,当您向电子邮件提供值时,它确实如下所示。观察提供值后,电子邮件和密码已被提取
当浏览器开始从页面加载时保存的凭据(如用户名、电子邮件、密码等)自动填充/自动完成此值时,就会出现问题。请参见下面的屏幕截图:
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>
我已经尝试过自动对焦电子邮件字段,但没有成功。
我还尝试在页面加载后单击代码中的元素,但没有成功。请帮助我如何解决这个问题。
这个对我有用
.form-label-group input:-webkit-autofill ~ label {
/* CSS property */
}
你可以尝试一下
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)