Почему не работают псевдоэлементы у тега input?

Question

[ezelen]

Все привет!

Народ, подскажите пожалуйста дураку, почему не отображаются псевдоэлементы в Мозиле, Опере и IE? В Хроме все норм, а вот в этих трех - не норм... Их именно даже в разметке нет...

HTML:
<input type="text" class="pseudo" />

CSS:

.pseudo::before {
	content: "\f014";
	font-family: 'FontAwesome';
	color: #ccc;

}

Заранее спасибо!

Comments

[ezelen]

Ребята, сорри. Обновил вопрос. Предыдущее как раз работало нормльно везде. Двойные двоеточия ставил специально для мозилы. А вот к одиночному тегу чекбокса применятся хочет только в Хроме.

Answer 1

[Алексей Уколов]

Это не работает потому, что у тега input нет контента. А псевдоэлементы вставляются до или после контента. Нет контента - нет псевдоэлементов.

Comments

[ezelen]

То есть, заставить это работать с одиночным тегом, как в Хроме, для Мозиллы и других способа нет, кроме как использовать лейбу или какой-то див?

[Алексей Уколов]

ezelen: да, нельзя

[Алексей Уколов]

ezelen: у меня в Хроме, кстати, не работает - jsfiddle.net/pyc9t8ud/1

[ezelen]

Спасибо за ответ!

[ezelen]

Алексей Уколов Да, это только для чекбокса работает...

[Евгений Петров]

Дополню, что некое подобие псевдоэлемента для input есть для оформления placeholder.
В спецификации ничего на эту тему нет и каждый вендор реализовал это по-своему. В webkit и Gecko это сделано с помощью ::-webkit-input-placeholder и ::-moz-placeholder.

[ezelen]

Евгений Петров: Огромное спасибо! Полезная штука;)