This is a rough proposal for porting toggle states (the things that checkboxes, radio buttons, and <details> have) into pure CSS.

The Use-Case

Virtually every time I produce a page with non-trivial user interaction, I end up wanting to have something that toggles between "clicked" and "not clicked" in some way.

For example, I have a small recipe app for personal use. You can click on ingredients as you prepare them, and they turn light gray and crossed out to help guide your eyes away from them, so you can focus just on the remaining ingredients that you need to deal with.

For another example, any time I make something using tabs, I want to show/hide some panels based on clicking on some tabs, and style the "active" tab differently as well.

For a third example, I sometimes want a popup dialog to show up when I click some button, which closes itself when you click the page-covering background.

There's just tons of little examples you produce all the time, which are basically just the functionality of radio buttons and checkboxes.

These could be done with JS, but that's fiddly and annoying. I've got to wait for the DOM to load, attach click handlers (and touch handlers!), and then add/remove classes.

Instead, I nearly always end up using hidden <input> elements. For example:

<ul class='ingredients'>
  <li><label><input type=checkbox><span>1 banana</span></label>
  <li><label><input type=checkbox><span>1 cup blueberries</span></label>
  ...
</ul>
<style>
input[type='checkbox'] { 
  display: none; 
}
input[type='checkbox']:checked + span {
  color: silver;
  text-decoration: line-through;
}
</style>

Here, it's just a little bit of style, plus an annoying bit of extra markup, and everything just works. No JS, and it's very dependable. This example can be generalized pretty obviously to address the other use-cases I provided.

Ideally, that annoying bit of extra markup could be eliminated, though. It seems so simple!

Proposal for toggle-* properties

I propose the following four properties which, taken together, implement a slight superset of what you can do with checkboxes and radio buttons.

toggle-states:  none | <integer> sticky? | infinity  (initial: none)
toggle-group:   none | <ident>  (initial: none)
toggle-share:   none | <selector>#  (initial: none)
toggle-initial: <integer>  (initial: 1)

toggle-states is the basic function that turns toggle functionality on/off. It defaults to none, which just means the element doesn't toggle at all. Alternately, you can set it to an 2 or greater, which defines the number of states it toggles between. The first state is, by convention, the "off" state, and all further states are different flavors of "on". Normally, it'll just cycle between all the states in order; if you reach the end and click again, it'll return to the first state. If the sticky keyword is provided, it'll skip the "off" state when it's cycling back around (this is needed for radio buttons, which stay clicked once you click them once). Obviously, infinity doesn't need stickyness, since there's no end. (The actual number of states supported is impl defined, but is required to be above some minimum number, like 256 or something.)

toggle-group implements the radio-button functionality. If you click an element with toggle-group set to a non-none value, all other elements in the page with the same toggle-group value will automatically be set to their first state (that is, turned "off").

toggle-share implements the <label> functionality. When you click an element with toggle-share, it acts as if you'd clicked all the elements it points to as well. The <selector> type is probably represented by the select() function, currently being defined in SVG2. This is implemented as "sharing" instead of "redirecting" like <label> does for two reasons:

1. <label> has to deal with actual clicking, dispatching events and the like, and it's just simpler if there's still only a single click event originating from a user's action. CSS toggling doesn't have the same problem.
2. I've often found, when using <label>s for tabbed interfaces, that I want to style both the active label and the active panel. Right now I need to do that by pushing the hidden <input> further up the DOM, then using descendant selectors to actually style the two elements. It's much easier if you just actually toggle both of them.

toggle-initial just sets the initial state of the toggle counter, like what the checked attribute does on <input>, or open on <details>. It must be set to an integer 1 or greater.

These all rely on the concept of a "toggle counter", which every toggleable element has. Toggle counters start at the toggle-initial value whenever elements become toggleable, and increment whenever the user clicks the element (or does similar behaviors that mean the same thing - whatever would activate a checkbox). This means, for example, that removing an element from the document temporarily and then reinserting it will reset the toggle counter, since for a little while the element didn't match the selectors that make it toggleable.

A toggleable element should probably automatically be focusable, as well.

Selecting toggled elements

Now we come to the part that's actually difficult (where difficult means "impossible, unless we bite a bullet we usually try to avoid"): styling an element differently based on its toggle state.

The obvious way would be to just enhance the :checked pseudo-class: :checked would match any element which is toggleable and in a state > 1. We would also want to allow a new parametrized version of :checked, so that :checked(n) matches elements in state n only.

This immediately runs into a cyclic dependency problem, as illustrated by this example:

.foo {
  toggle-states: 2;
  toggle-initial: 2;
}
.foo:checked {
  toggle-states: none;
}

The above code says that while an element matches :checked, it's not toggleable (and thus doesn't match :checked). This is, to understate things, a problem.

(We already have some things that look like they trigger the same problem, but don't really, such as the :dir() selector and the direction property. We avoid problems here by saying that :dir() only pays attention to the direction determined from the document language, and ignores the direction property entirely.)

It's tempting to just bite this bullet and say that you can't use the toggle-* properties in a rule when :checked appears in the rule's selector.

This works exactly once; if we ever introduce a second thing with similar problems, you suddenly need full-blown cycle detection, as Selector A can set Property B, which triggers Selector B to set Property A, which causes Selector A to no longer match.

I had brief thoughts that we could get around this by not using selectors, and instead introducing a function that takes multiple values, and returns one corresponding to the toggle state (for example, I'd do my original example with color: toggle(black, silver); text-decoration: toggle(none, line-through);). This is more convenient in some cases, less convenient in others, but most importantly, it's functionally identical to using a selector, and so doesn't help us at all.

I have no idea how to solve this. As far as I can tell, it can't be solved. We must either rely on the document language somehow (like :dir() does), or else just bite the bullet and somehow do the "sorry, can't use that property in this block" thing.

I'm thinking that the latter might be possible if we generalize ahead of time, and state that all properties which affect selector state can't be set in any block that uses one of the affected selectors, even if the property in question isn't relevant to the selector in question. This cuts out some potentially useful interactions, but it's safe and inexpensive.

If anyone has any better suggestions, speak up!

Some Examples

The example code I gave above would be vastly simplified:

<ul class='ingredients'>
  <li>1 banana
  <li>1 cup blueberries
  ...
</ul>
<style>
li {
  toggle-states: 2;
}
li:checked {
  color: silver;
  text-decoration: line-through;
}
</style>

Implementing a tabbed display, where clicking on a tab shows its corresponding panel and hides the rest, would similarly become pretty trivial:

.tab {
  toggle-states: 2 sticky;
  toggle-group: tabs;
  toggle-share: select(attr(for idref));
}
.panel {
  toggle-states: 2 sticky;
  toggle-group: panels;
}
.tab:checked {
  /* styling for the active tab */
}
.panel:not(:checked) {
  display: none;
}

Thoughts?

If you've got any thoughts on this proposal, feel free to share them in the comments!