Ответ 1
Как вы можете прочитать здесь http://www.w3.org/TR/CSS21/generate.html: после работы только с элементами, имеющими (дерево документа). <input> не имеет содержимого, а также <img> или <br>.
Какие элементы поддерживают псевдо-элементы:: before и:: after?
Я пытаюсь придумать хороший стиль стилей по умолчанию для <input> в HTML5 и пробовал следующее:
input::after { display: inline; }
input:valid::after { content: ' ✓ '; color: #ddf0dd; }
input:invalid::after { content: ' ✗ '; color: #f0dddd; }
Увы, контент ::after никогда не появляется. Это не проблема с двойными или единичными двоеточиями для псевдоэлементов; Я пробовал и то, и другое. Это также не проблема с наличием псевдоэлемента и псевдокласса; Я пробовал это без :valid и :invalid. Я получаю такое же поведение в браузерах Chrome, Safari и Firefox (Firefox не имеет псевдо-классов :valid и :invalid, но я пробовал это без них.)
Псевдоэлементы отлично работают на элементах <div>, <span>, <p> и <q>, некоторые из которых являются блочными элементами, а некоторые являются встроенными.
Итак, мой вопрос: почему браузеры согласны с тем, что <input> не имеет ::after? Я не могу найти ничего в спецификации, которая указала бы это.
Ответы
Ответ 2
Webkit позволяет выполнять следующие действия после ввода. Если вы хотите, чтобы он работал в Firefox, вы можете попробовать использовать:: after на входной метке, а не сам вход.
Ответ 3
Вы можете поместить пробел до или после элемента. Например:.
<style>
#firstName:invalid+span:before {
content: "** Not OK **";
color: red;
}
</style>
<input type="text" name="firstName" id="firstName" placeholder="John"
required="required"
title="Please enter your first name (e.g. John )"
/><span> </span>