Having an issue where my input field, which is initially of type "email", changes to type "text" when in a :focus state. Additionally, it appends
kl_ab.original_type="email"email to type text upon focus causes the first character entry to be marked as correct. To provide clarity, I will attach two screenshots captured from the developer tools - one showing the email form unfocused, and the other in the :focus state along with the relevant code.
UNFOCUSED INPUT
https://i.sstatic.net/pLFnj.png
INPUT WITH THE :focus STATE
https://i.sstatic.net/tdtoS.png
HTML CODE
<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 CODE
.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);
}
}