Выравнивание вопроса о заполнителе ввода

Я столкнулся с проблемой ввода (типа поиска) в Google Chrome и других браузерах. Пожалуйста, обратите внимание на основной HTML-код:Выравнивание вопроса о заполнителе ввода

<input type="search" placeholder="Search">

и CSS:

input { 
    height: 30px; 
    font-size: 16px; 
}

JSFiddle Example. Проблема заключается в том, что заполнитель не выровнены по вертикали хорошо в некоторых браузерах:

Google Chrome (v 55.0.2883.87 м.):

Mozilla Firefox (с. 45.0.2):

Internet Explorer (v 11.576.14393.0.):

Opera (v. 42.0.2393.94):

Но это правильно отображать (как я хочу это будет отображаться) в:

Край (v 38.14393.0.0).

Safari (для Windows v. 5.1.7 7534.57.2):

Я был бы рад разместить его точно посередине, пожалуйста, помогите достичь этого. Спасибо!

UPD:

Я пробовал:

Сброс CSS;
Установка высоты линии;
Комплект прокладок;
:: - webkit-input-placeholder селектор для установки высоты/высоты линии;

источник

2017-01-08 Mike

Вы уже пытались сбросить свой CSS? С [нормализовать.css] (https://necolas.github.io/normalize.css/), например. [Обновленный скрипт] (https://jsfiddle.net/rjuub4mf/1/) – Quinox

@Quinox Спасибо за ваш ответ! Да, я уже пробовал, результат такой же. – Mike

И что, если вы нацеливаете placeholder с префиксом, как [этот пример] (https://css-tricks.com/almanac/selectors/p/placeholder/). – Quinox

Добавить line-height в CSS:

input { 
    line-height:30px; 
    height: 30px; 
    font-size: 16px; 
    padding: 1px 0; 
}

Изменение высоты строки, потому что вы используете отступы.

источник

2017-01-08 16:41:51 bulldozer

Благодарим вас за ответ, но проблема не устранена. Извините за ввод в заблуждение, я удалил прописку из исходного кода. Без заполнения проблема остается прежней. – Mike

Попробуйте добавить это в css. input :: - webkit-input-placeholder {} https://jsfiddle.net/d0rfbbLm/1/ И проверьте это: http: //stackoverflow.com/questions/4982045/html5-placeholder-line-height-in-webkit – bulldozer

К сожалению, это не решение проблемы. Какую версию Google Chrome вы используете? – Mike

Возможно, это проблема с семейством шрифтов. Сегодня я потратил 6 часов, чтобы исправить ту же проблему на Android. В конце концов это была проблема шрифта «HelveticaNeueCyr». У шрифта есть пробел на устройствах Android, которые невозможно исправить с помощью css.

Я перешел на Arial и исправил его.

источник

2018-01-12 15:45:59 Ilyasnake

Выравнивание вопроса о заполнителе ввода

ответ

Смежные вопросы