Вертикально центрировать местозаполнитель ввода в Chrome
Любая идея, как вертикально центрировать этот заполнитель поля ввода в Chrome? Размеры шрифта ввода и заполнителя намеренно отличаются. Заполнитель ввода в Firefox и Safari отображается вертикально по центру, но отображается ниже Chrome.
Вот пример, в котором вы видите, что центрирование не работает в Chrome.
<input class = "input" placeholder = "vertical center"/>
.input {
font-size: 14px;
&::placeholder {
font-size: 8px;
text-align: left;
color: green;
// transform-origin: 0% 50%;
// transform: translate3d(0, -2px, 0);
}
}
Вот codepen, показывающий проблему: https://codepen.io/illusionfactory/pen/xxJZrYp?editors=1111
Я пробовал ответы из других постов, например, преобразование заполнителя, но, похоже, это не сработало.
Перевод перемещает его, но тогда выравнивание не во всех браузерах. Любая помощь приветствуется.
Ответы 2
вы можете попробовать с css flexbox.
&::placeholder {
margin: 0;
font-size: 11px;
display:flex;
align-items:center;
justify-content:center;
color: green;
}
если вы хотите узнать о css flex box, пожалуйста, обратитесь это это может вам помочь.
input {
padding: 12px 2px;
font-size: 19px;
}
input::-webkit-input-placeholder {
color: green;
font-size: 8px;
position: relative;
top: -4px;
}<input placeholder = "Vertical Center"/>@ 1192805 Добавлен размер шрифта
проблема в chrome вызвана тем, что размер шрифта ввода и размер шрифта заполнителя отличаются. ваш пример удаляет размер входного шрифта, но размер входного шрифта является обязательным и не может быть удален
@ 1192805 В этом случае вы можете использовать position: relative и отрегулировать top, пока он не окажется в центре. Смотрите редактирование.
пробовал это раньше, но это заставляет заполнитель перемещаться и в сафари, который тогда не центрируется. в идеале все три браузера отображали бы его вертикально по центру
@ 1192805 Понятно, единственный вариант, который я вижу в этом случае, — создать собственный заполнитель, перекрывая элемент прямо поверх ввода. И скрыть его, когда ввод сфокусирован. Если бы текстовый ввод мог иметь прозрачный фон, я бы поместил ввод сверху, что было бы проще реализовать.
размеры шрифта не могут быть удалены, поэтому, к сожалению, это не работает