Размер строки курсора CSS при вводе поля ввода

У меня есть изображение в качестве фона для поля ввода. Я могу легко установить размер строки и размер шрифта, но когда вы нажимаете на вход, линия курсора находится вне фонового изображения.

Есть ли инструкция CSS (вы их называете?), которая контролирует это?

Ответ 1

Вероятно, вы используете line-height для отображения текста на входе с вертикальной ориентацией. Однако это также является причиной вашей проблемы. Попробуйте поэкспериментировать с настройками padding для ввода вместо этого, оставив line-height установленным на normal.

Ответ 2

Проблема с использованием дополнения заключается в том, что она отображается непоследовательно в разных браузерах, тогда как высота строки в текстовых областях ввода одинаково отображается в IE7, IE8, IE9, Safari, Chrome, Firefox и Opera. Похоже, вам нужно выбирать между курсором ввода или вертикальным выравниванием текста ввода.

Ответ 3

Да, линия-высота.

Try:

input {height: 28px; font-size: 10px; padding: 7px 5px;}

Ответ 4

Сообщение Вертикальное выравнивание текстового курсора (каретки?) в поле ввода с jQuery, Javascript или CSS может вам помочь.

Кажется, ваш размер заполнения влияет на размер и положение курсора.

Ответ 5

Будет хорошо, если у нас есть код, вы также можете попробовать

background:url("yourimage") right top no-repeat;
font-size:12px;
padding:5px 5px;
line-height:normal;

зависит от размера ваших изображений

Ответ 6

Используя line-height: normal или line-height:inherit сделал трюк на моей стороне. Спасибо за ваши ответы.

Ответ 7

текст во входном теге может быть автоматически центрирован по центру, не используйте на нем высоту строки.