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

qaru.site/info/80215/... описывает, как создавать флажки с помощью CSS3, не требуя <label>:

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

Fiddle

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

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

Ответ 1

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

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

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

Ответ 2

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

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