Какие элементы поддерживают псевдоэлементы ::before и ::after?

Я пытаюсь придумать хороший стиль по умолчанию для <input>s в 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>s не имеют ::after? Я не могу найти ничего в спецификации, что указывало бы на это.


forms html css pseudo-element
person James A. Rosen    schedule 21.08.2010    source источник
comment
Для справки, двойное двоеточие и одинарное двоеточие предназначались для различения псевдоэлементов и псевдоклассов, потому что люди объединяли их вместе в общий термин, называемый псевдоселекторами.   -  person BoltClock    schedule 04.10.2012

Ответы (3)


arrow_upward
30
arrow_downward

Как вы можете прочитать здесь http://www.w3.org/TR/CSS21/generate.html, :after работает только с элементами, имеющими содержимое (дерево документа). <input> не содержит контента, так же как и <img> или <br>.

person davehauser    schedule 21.08.2010
comment
Грустная правда у вас там. :( Если бы поддерживались элементы <img>, <input> и некоторые другие, можно было бы добиться некоторых приятных вещей. Например, всплывающие подсказки к изображениям с атрибутом alt и тому подобное. Тем не менее спасибо! - person Web_Designer; 03.11.2011
comment
@Web_Designer согласился, я просто соединил что-то с <input> и селектором after, где он скрывает видимость ввода, но показывает звездочку над вводом с помощью селектора :after - person Josh Bedo; 13.06.2014
comment
Это на самом деле не совсем правильно. Существует определенная категория элементов, включая ‹img› и ‹input›, а также ‹select›...‹/select›, которые невосприимчивы к различным подмножествам CSS из-за предположения W3C, что они будут указывать специфичные для ОС реализации. Это несколько сбивает с толку, потому что элементы управления ‹input› теперь полностью подчиняются CSS (но не псевдоэлементам), а другие нет. - person podperson; 10.12.2020

arrow_upward
6
arrow_downward

Вы можете поставить интервал до или после элемента. Например.:

<style>
  #firstName:invalid+span:before {
    content: "** Not OK **";
    color: red;
  }
  
  #firstName:valid+span:before {
    content: "** OK **";
    color: green;
  }
</style>

<input type="text" 
    name="firstName" 
    id="firstName" 
    placeholder="John" 
    required="required" 
    title="Please enter your first name (e.g. John )" 
/><span>&nbsp;</span>

person cobberboy    schedule 16.04.2013

arrow_upward
5
arrow_downward

Webkit позволяет вам использовать ::after для элементов ввода. Если вам нужен способ заставить его работать в Firefox, вы можете попробовать использовать ::after на метке ввода, а не на самом вводе.

person Andrew Philpott    schedule 25.02.2011
comment
Не уверен, что это изменилось, но ::after на input элементах не работает в Chrome 21 или Safari 5.1.7 (Windows). jsfiddle.net/V8cvQ/13 - person MrWhite; 10.08.2012