Является ли: до псевдоэлемента допустимым на входе ?

В этом ответе StackOverflow описывается, как установить флажки с помощью CSS3, не требуя :

 input[type=checkbox]:before { content:""; display:inline-block; width:12px; height:12px; background:red; } 

скрипка

Это работает в Chrome 22, но не в Firefox 15 или IE 9.

Учитывая отсутствие поддержки в последних двух браузерах, поведение Chrome в действительности соответствует спецификации CSS3?

Это неизведанные земли; спецификации не проясняют ситуацию. Спецификация CSS 2.1 говорит : «Обратите внимание. Эта спецификация не полностью определяет взаимодействие: before и: after с замененными элементами (такими как IMG в HTML). Это будет более подробно описано в будущей спецификации ». И, несмотря на дискуссию, INPUT можно рассматривать как замененный элемент в смысле CSS 2.1 .

Можно подумать, что эти псевдоэлементы не могут использоваться для элементов, которые не могут иметь никакого контента (то есть с объявленным содержимым EMPTY), например IMG или INPUT. Однако в формулировке упоминается IMG, а в Приложении D есть правило с селектором br:before .

И CSS3 Selectors, одна из немногих частей CSS3, которые достигли статуса рекомендации, не проясняют ситуацию. В нем говорится : «Псевдоэлементы :: before и :: after могут использоваться для описания сгенерированного контента до или после содержимого элемента. Они объясняются в CSS 2.1 [CSS21]. ”

Я считаю, что поведение Chrome неверно. Если вы посмотрите здесь , он говорит, что ::before и ::after псевдоэлементы добавляют новое content до или после content целевого элемента. Элементы ввода не имеют content ; они просто имеют value . Вы не можете, например, сделать Pasta .

Если все это верно, то, похоже, поведение Chrome недействительно, тогда как IE и Firefox являются правильными.

  • Гибкая модель коробки - дисплей: flex, box, flexbox?
  • CSS3 - 3D Flip Animation - IE10 transform-origin: сохранение-3d обходное решение
  • Какова цель символа «@» в CSS?
  • Как применить несколько преобразований в CSS?
  • Как вставить разрыв строки перед элементом с использованием CSS
  • Укладка стрелки на всплывающих подсказках бутстрапа
  • Можно ли применить несколько цветов фона с помощью CSS3?
  • Как сделать детей Flexbox 100% высотой своего родителя?
  • Анимация CSS3: отображение + непрозрачность
  • Любой способ ограничить длину границы?
  • Стиль дочернего элемента при наведении указателя мыши на родителя
  • Давайте будем гением компьютера.