qaru.site/info/80215/... описывает, как создавать флажки с помощью CSS3, не требуя <label>:
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 говорит: "Примечание. Эта спецификация не полностью определяет взаимодействие: до и: после с замененными элементами (например, 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. Вы не можете, например, сделать <input>Pasta</input>.
Если все это верно, тогда, похоже, поведение Chrome неверно, тогда как IE и Firefox верны.