RichStyle: The Angel is in The Detail.

A Proposal forRepresenting Check Boxes and Radio ButtonsinHTML6

In entity relationships, one-to-one relationship between two entities usually means there’s something wrong; probably it means they’re actually one entity.

The association between the HTML element <input type="checkbox"/> and the element <label> associated with it seems it reflects the same problem. Those two elements should be merged and turned into one single element. Likewise; the element <input type="radio"/> and the element <label> associated with it. Think of something like this:

    <li>check box 1</li>
    <li>check box 2</li>
    <li>check box 3</li>

    <li selected>option 1</li>
    <li>option 2</li>
    <li>option 3</li>


… styled like this:

cl li:icon {
    content: char(☐);

cl li:checked:icon {
    content: char(☑);

rl li:icon {
    content: char(○);

rl li:selected:icon {
    content: char(🔘);

The icon used here for selected radio button (🔘) is a unicode character called RADIO BUTTON (1F518). Unfortunately, so far there’s no dedicated unicode character for unselected radio button. So, I borrowed the character (○) (25CB WHITE CIRCLE) for this purpose.

For farther information about representing icons in web pages, see my proposal Icon Standardization For Web Applications.