The “Checkbox Hack” (and things you can do with it)

Chris Coyier12/21/11About 3 minCSSArticle(s)blogcss-tricks.comcss

The “Checkbox Hack” (and things you can do with it) 관련

Using a hidden checkbox, you can re-create a lot of functionality on website that rely on clicks and toggled states. Fair warning, it's not always super semantic or a good idea, but it's awful fun to play with.

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. Then you can use the adjacent sibling combinator to style the <div> differently based on the :checked state of the input.

.control-me {
  /* Default state */
}
#toggle:checked ~ .control-me {
  /* A toggled state! No JavaScript! */
}

So you can style an element completely differently depending on the state of that checkbox, which you don’t even see. Pretty neat. Let’s look at a bunch of things the “Checkbox Hack” can do.

See The Checkbox Hack by chriscoyier on CodePen.

Note

Some of this stuff crosses the line of what you “should” do with CSS and introduces some questionable semantics. It’s still very fun to play with and cool that it’s possible, but in general, functional behavior should be controlled by JavaScript.

Custom Designed Radio Buttons and Checkboxes

See Accessible Custom Checkboxes with CSS only by GeoffreyCrofte on CodePen.

You can hide the default UI of a radio button or checkbox, and display a custom version right on top of it.

Custom radio and checkbox inputs using CSS

In my never ending quest to find weird and wonderful ways to abuse CSS and all its little intricacies, I have come up with a pretty good way of using CSS to create custom radio and checkbox inputs without JavaScript, that are accessible, keyboard controlled, don’t use any hacks and degrade nicely in non supporting browsers. The journey wasn’t easy and I was on the brink of filing it in the “to crazy” folder, never to be seen again. Luckily I had a brain wave that paid off and actually allowed this to be a very viable solution that degrades beautifully and works in 80% of the browsers. This is my story.

How to Customize Checkbox and Radio Inputs with Custom CSS | Wufoo

Use Custom CSS to customize checkbox and radio inputs on your HTML forms.

<VPIcon icon="fas fa-globe"/>Demo by Ryan Seddon — Demo by Ryan Seddon

Tabbed Areas

The “tabs” design pattern is just toggling on and off of areas, perfect for the checkbox hack. But instead of checkboxes, in which any checkbox can be on or off independently of one another, these tabs use radio buttons in which only one per group can be on at a time (like how only one tab can be active at a time).

Demo from Functional CSS tabs revisited:

See Functional CSS Tabs by chriscoyier on CodePen.

See Radio Button Dropdowns by chriscoyier on CodePen.

---