Странная палочка показывается слева от 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>


Ответы (0 шт):