Patricio Treviño

Patricio Treviño

Husband . Father . Developer
5total entries in css

Standardizing the checkbox and radio buttons using CSS (and only CSS)

If you ask me to name one thing that I use everyday, I would probably say a browser and I'm pretty sure I'm not alone on this boat. For better or for worse, browsers have become part of our lives, we use them at work, we use them at home, we use them to read emails, news and even to chat and share our thoughts with the world. I dare say it's the one tool you cannot live without (unless of course you have been living under a rock for the last decade or so).

Fortunately for us, we are not short on options: Chrome, Firefox, Edge, IE, Opera, Brave, and the list goes on. But it was due to this diversity of options that non other than the founder of the Internet, Sir Timothy John Berners-Lee, decided some standards were needed. But standards are just guidelines that tell the browser the where and the what, but they don't tell the how. So the final implementation of a standard can (and almost 100% of the time, will) look different in one browser than it does in another.

Input elements - especially the checkbox and the radio buttons - are a good example of the above, so in this article I'm going to show you how to standardize these two elements with nothing but CSS.

Adding content via css content/attr functions

Syntax

<selector>:[before|after] {
content: [attr(<attribute>) | 'plain text']
}
view raw syntax.text hosted with ❤ by GitHub

Option Description
attribute The name of the attribute to be used to populate content.

Calculating values in css with calc

Syntax

calc(<expression>)
view raw syntax.text hosted with ❤ by GitHub

Option Description
expression A mathematical expression, the result of which is used as the value.

Pointer accuracy detection with pointer and any-pointer media features

Syntax

@media ([pointer|any-pointer]: <[none|coarse|fine]>) {
[styles]
}
view raw syntax.text hosted with ❤ by GitHub

Option Description
none Use when the primary input mechanism of the device does not include a pointing device
coarse Use when the primary input mechanism of the device includes a pointing device of limited accuracy
fine Use when the primary input mechanism of the device includes an accurate pointing device (mouse)

Detect browser support for specific CSS features

Syntax

@supports [not](<supports-condition>) {
[styles]
}
view raw syntax.text hosted with ❤ by GitHub

Option Description
supports-condition The feature to be evaluated