CSS Form and Component Styling Quiz
Four drills on styling forms and small components with pseudo-classes, pseudo-elements, and the sibling combinator: dropdown menus, custom checkboxes, accessible accordions, and automatic numbering.
1,188 views
37
Build a multi-level dropdown menu using only CSS: the submenu opens on hover of its parent <li>. Use the > combinator so deeper menus do not leak.
Style a custom checkbox that hides the native input but keeps it focusable. Use the adjacent-sibling combinator to flip the visual state when the input is checked.
Build a CSS-only accordion using <details> and <summary>. Style the open marker with [open] and a pseudo-element.
Use the CSS counter API to number the items in an outline list as 1., 2., 3. automatically, even though the markup uses <ul> (not <ol>).