css - Styling checkboxes, radio buttons and dropdowns Styling checkboxes and radio buttons using CSS The styling of checkboxes and radio buttons became possible with the introduction of the :checked pseudo-class in CSS3. This page describes two techniques: an image-based method, shown in the demonstration below, and a pure CSS method. Download examples The archives below contain two sets of example files demonstrating both the image-based and pure CSS styling methods described on this page. Image-based styling Image-based styling allows the greatest flexibility in appearance. HTML of the following form is used for each checkbox or radio button: The input and label elements are shown here on separate lines to increase readability; they should usually be put on the same line, with no intervening space, for more accurate styling. We hide the checkboxes and radio buttons in the stylesheet: The selectors in lines 1 and 2 use the negation pseudo-class to hide the rule from older browsers. We then position the label and display the unchecked image: Pure CSS styling We then position the label:
Stuff you can do with the "Checkbox Hack" The “Checkbox Hack” is where you use a connected <label> and <input type="checkbox"> and usually some other element you are trying to control, like this: <label for="toggle">Do Something</label><input type="checkbox" id="toggle"><div class="control-me">Control me</div> Then with CSS, you hide the checkbox entirely. Probably by kicking it off the page with absolute positioning or setting its opacity to zero. But just because the checkbox is hidden, clicking the <label> still toggles its value on and off. So you can style an element completely differently depending on the state of that checkbox, which you don’t even see. Some of this stuff crosses the line of what you “should” do with CSS and introduces some questionable semantics. Custom Designed Radio Buttons and Checkboxes You can hide the default UI of a radio button or checkbox, and display a custom version right on top of it. File system like “tree menu” Tabbed Areas Demo from Functional CSS tabs revisited: Dropdown Menus Push Toggles
Less Framework 4 I called Less Framework "a CSS grid system for designing adaptive websites". It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns. It also had matching typographic presets to go with it, built with a modular scale based on the golden ratio. The resources it was originally published with are still available on GitHub. Contrary to how most CSS frameworks work, Less Framework simply provided a set of code comments and visual templates, instead of having predefined classes to control the layout with. This is how I still work today and definitely a method I advocate. /* Default Layout: 992px. Less Framework was popular in the early days of responsive design. Eventually, I moved on from fixed-width grid systems and worked on a fully fluid-width one, in the form of Golden Grid System. Less Framework's popularity was helped by the following contributions and the lovely people behind them (dead links crossed off):