Поле не отображается правильно в браузерах iOS

Question

Я работаю над HTML-страницей, которая имеет форму.Я использую css для редактирования полей ввода, и они хорошо отображаются на настольных компьютерах и ноутбуках.

Но когда я посещал сайт на iOS в обоих браузерах Chromeи Safari входные данные выглядели так:

Я использую CSS

input{
border: 0;
outline: 0;
background: transparent;
border-bottom: 1.5px solid black;
}

Что я делаю неправильно, чтобы сделатьэто отображать по-другому?

Answer 1

Попробуйте это ...

input[type="text"] {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1.5px solid black;
}

<input type="text" placeholder="Name" autofocus>

Хорошо выглядит и на мобильном телефоне.(Android)