Получение кликов по псевдоэлементам css:

Question

Я пытаюсь сделать пользовательский флажок, поэтому я сделал что-то вроде этого: http://jsfiddle.net/wQdUn/2/

Проблема в том, что в браузерах на основе WebKit этот флажок устанавливается только при нажатии на содержимое <span>, а не на само поле, а в Firefox я получаю ожидаемое поведение.

Итак, у меня два вопроса:

• Какое поведение правильное (то есть соответствует ли оно спецификациям)?
• Как получить желаемый результат в обоих браузерах (и других ...)?

Спасибо.

Answer 1

Не уверен насчет первого вопроса, но если вы сделаете span встроенным блоком, он будет работать так, как вы ожидаете в браузерах WebKit. Смотри http://jsfiddle.net/wQdUn/5

Answer 2

Для тех, кто заходит в эту форму google:

Safari 6.0.4 (8536.29.13) все еще сталкивается с этой проблемой, вам нужно установить inline-block на псевдоэлементе, чтобы заставить работать щелчок.1004 *

Chrome переключился на Blink в качестве движка рендеринга, поэтому эта проблема больше не возникала в Chrome (26.0.1410.65).