checkmark for select multiple

[josepharhar]

For customizable single-select, we have a ::checkmark pseudo-element with its content property set to a checkmark emoji: ✓ U+2713. The unchecked options just have visibility:hidden set on ::checkmark so there is empty space where the checkmark would be.

For multi-select, we could consider having checkboxes, where unchecked options have an empty box and checked options have a box with a checkmark in it. There are a pair of unicode emojis for this (I found in this list):

• U+2610 ☐
• U+2611 ☑

I'm afraid of using these because most fonts don't seem to include a nice rendering of the unchecked checkbox U+2610, which would result in it looking ugly and having different widths for checked and unchecked ones. I think some fonts also render this as a picture of a ballot box with a piece of paper?

We could also solve this by providing our own SVGs, but using SVGs kind of got shot down here, and if we used an SVG in a background-image or something then it wouldn't respond to writing modes, colors, or most properties you could set on it from CSS.

I'm kind of in favor of keeping the single-select behavior of just showing a checkmark for checked ones and nothing for the others, but does anyone have any good ideas?

[josepharhar]

Some images of the checkbox emojis mentioned above on different platforms:

My linux computer:

iPhone:

Pixel:

[lukewarlow]

I personally think stick with the single select styles and if people want checkboxes etc they can customise it and set a font that works for that use case.