Как добраться до placeholder и выровнять по вертикали при наличии #shadow-root (user-agent)?

Question

[I_want_to_know]

Столкнулся с такой штукой как #shadow-root (user-agent) из-за этой штуки, placeholder в input стоит не по центру, а прижат к низу.
Я не могу понять как добраться до placeholder и вертикально центрировать его.
Вот результат текущий:


Собственно вот такой инпут я указал в html:

<input class="subscribe subscribe__username" type="text" name="username" placeholder="Ваше имя" />

Вот что выдает инспектор:

Comments

[Сергей delphinpro]

Картинки нормально вставьте

[I_want_to_know]

Сергей delphinpro, поправил.

[Сергей delphinpro]

Добавьте описания классов subscribe и subscribe__username

[I_want_to_know]

input.subscribe {
	display: block;
	height: 30px;
	background: #fff;
	border: 1px solid #ccc;
	padding: 6px 12px;
	line-height: 1;
	cursor: pointer;
	margin-bottom: 10px;
	border-radius: 15px;
}

input.subscribe:focus {
	border: 1px solid #f85a16;
	outline: 1px solid #f85a16;
}

.subscribe::placeholder,
.dropdown .dropdown-label {
  color: #7e7e7e;
  font-size: 12px;
}

Для subscribe__username стилей нет.

[ksnk]

https://developer.mozilla.org/en-US/docs/Web/CSS/:...
псевдокласс ::placeholder

[I_want_to_know]

Сергей delphinpro,
Я совсем в тупике...
В codepen всё ок.
https://codepen.io/boulingist81/pen/GgKOegO
Получается, gulp где-то шалит?

[Сергей delphinpro]

I_want_to_know, причем здесь галп? Просто к инпуту применяются еще какие-то стили. Их нужно посмотреть в инспекторе браузера и выяснить, кто виноват, и что делать.
Я почти уверен, что применяется другой паддинг, большей величины, а так как высота ограничена, то текст смещается вниз.

[Ankhena]

line-height: 1; уберите. Не знаю из какого браузера скрин, но не не все браузеры его воспринимают единицей для инпутов. Не помню сейчас минимальны значения.

Но ни это

при наличии #shadow-root (user-agent)

ни это

Получается, gulp где-то шалит?

не имеют отношения к проблеме.

[I_want_to_know]

Ankhena, Спасибо за совет.
Убрал, но реакции не последовало.
Вот как я решил проблему:
прописал те же стили, что и для дива с классом dropdown и всё заработало!
Всем спасибо.

[Ankhena]

I_want_to_know, поскольку никаких стилей dropdown вы нам не показывали, то сложно сказать насколько это уместно. Звучит странно.

Вообще, очень редко есть необходимость менять font-size для плейсхолдера. Обычно, он такой же как у инпута.