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 have 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:

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

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

Where:

…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](Icon Standardization For Web Applications).