Customized CSS based and JavaScript enhanced Checkboxes And Radiobuttons - Combining Individual Design And Accessibility

at first this is a css testcase proving browsers ability to render fully customized yet accessible radio and checkbox controls thats appearance are based on pure css by using advanced css pseudo class selector rules only.

secondly there is an opportunity to achieve the design goal by use of JavaScript for those browsers that do not handle the css 3 pseudo class ":checked", which is not a must at all, but still do not support above mentioned css 2 selector rules.

Salutation
Colors
something feels wrong? - let JavaScript fix it: DHTMLRadiobuttonAndCheckboxController.compile()

back to css only version:

customized css only checkboxes and radiobuttons

maßgeschneiderte Checkboxen und Radiobuttons - individuelles Design und Zugänglichkeit vereint

Erstens bestehen Browser diesen Seitentest, wenn sie in der Lage sind, systemunabhängige, individuell gestaltete Checkboxen und Radiobuttons darzustellen. Der Test formuliert dazu ausschließlich CSS-Regeln, die auf fortschrittlichen Pseudoklassen-Selektoren aufbauen.

Zweitens ist es unter Zuhilfenahme von JavaScript dennoch möglich, das gewünschte Aussehen und Verhalten der Formularelemente auch für jene Browsern zu erzwingen, die mit den Regeln der zugrundeliegenden CSS-Basis überfordert sind.

Da die dahinterliegende HTML-Struktur nach bestem Wissen semantisch ausgezeichnet wurde, sollte das Formular wie gewohnt sowohl mit der Maus als auch über die Tastatur bedienbar sein.

Peter Seliger - Hamburg, den 8. September 2006 - pseliger@gmx.net