Странная палочка показывается слева от input
Когда я ввожу что то в инпут, у меня показывается странная палочка, как на картинке. Она пропадает только если я кликаю в другое место. Иногда она не показывается. В чем может быть дело, и как это убрать?
UPD: При выполнении этого кода здесь эта палочка не появляется. Более того, у меня есть еще одна html страница с практически идентичными инпутами и тем же css, и там эта палочка также не появляется
section form {
width: 30rem;
}
section form .underlined-input {
border: 0;
outline: none;
border-bottom: 0.2rem solid #a1a8b4;
width: 30rem;
height: 4rem;
margin: 1.5rem 0;
font-size: 1.5rem;
color: #434c5d;
}
section form .underlined-input::-webkit-input-placeholder {
color: #a1a8b4;
}
section form .underlined-input:-ms-input-placeholder {
color: #a1a8b4;
}
section form .underlined-input::-ms-input-placeholder {
color: #a1a8b4;
}
section form .underlined-input::placeholder {
color: #a1a8b4;
}
section form .underlined-input:focus {
border-bottom: 0.2rem solid #3992ff;
}
<section>
<form action="">
<input type="email" class="underlined-input" name="" placeholder="EMAIL">
<input type="text" class="underlined-input" name="" placeholder="Никнейм">
<input type="password" class="underlined-input" name="" placeholder="Пароль">
<input type="password" class="underlined-input" name="" placeholder="Повторите пароль">
</form>
</section>
