所以存在这个问题,当我在 :focus
状态。它还在输入标签的末尾添加了 kl_ab.original_type="email"
。这对我来说是个问题,因为我想让浏览器检查用户写的地址是否正确,所以当 email
的类型更改为 text
的类型时,写第一个字符就可以了正确的。为了制作更简单的图片,我将发布开发工具的两个屏幕截图,一个是电子邮件表单未获得焦点时的屏幕截图,第二个是处于 :focus
状态和代码当然。
未聚焦输入
以 :focus
状态输入
HTML 代码
<form action="#" class="form">
<div class="form__group">
<input type="email" class="form__input" placeholder="Email address" id="email" required>
<label for="email" class="form__label">Email address</label>
</div>
</form>
SCSS 代码
.form {
&__group:not(:last-child) {
margin-bottom: 2rem;
}
&__input {
font-size: 1.5rem;
font-family: inherit;
color: inherit;
padding: 1.5rem 2rem;
border-radius: 2px;
background-color: rgba($color-white, .5);
border: none;
border-bottom: 3px solid transparent;
width: 80%;
display: block;
transition: all .3;
&:focus {
outline: none;
box-shadow: 0 1rem 2rem rgba($color-black, .1);
border-bottom: 3px solid $color-primary;
}
&:focus:invalid {
border-bottom: 3px solid $color-secondary-dark;
}
&::-webkit-input-placeholder {
color: $color-grey-dark-2;
}
}
&__label {
font-size: 1.2rem;
font-weight: 700;
margin-left: 2rem;
margin-top: .7rem;
display: block;
transition: all .3s;
}
&__input:placeholder-shown + &__label {
opacity: 0;
visibility: hidden;
transform: translateY(-4rem);
}
}
最佳答案
我知道这个问题的答案,因为同样的事情也发生在我身上
kl_ab.original_type="email"
此属性会自动添加到输入标签的末尾,因为您已将 Kaspersky 防病毒扩展程序添加到您的浏览器。
Kaspersky 自动添加 kl_ab.original_type="email"
并将输入类型从 email 更改为 text。
从浏览器中禁用或删除 Kaspersky 防病毒扩展程序后,您将不会遇到此问题。
https://stackoverflow.com/questions/64486754/