This content originally appeared on Go Make Things and was authored by Go Make Things
My friend Scott O’Hara just published a fantastic article on how to customize checkbox and radio button styles.
About three years ago now (2017/2018), I published a collection of accessible styled form controls which included specific markup patterns to create custom styled radio buttons and checkboxes. These patterns were the culmination of years of my own tinkering, studying other people’s implementations, and then stress testing them with the assistive technologies I had at my disposal.
At the time, the most robust way to style these form controls, without re-creating them from scratch with ARIA, was to visually hide the radio button or checkbox, and then recreate the controls using a
<label>or<span>and their pseudo-elements (::beforeand::after). The need for this approach was largely, but not entirely, due to Internet Explorer and Legacy Edge not providing the best support to directly style native HTML<input>elements themselves. And if you go even further back in time, all browsers had barries in directly styling these controls.That’s not to say, in 2018, that directly styling native radio buttons and checkboxes couldn’t be done (see restyled radio buttons and restyled checkboxes). But there were workarounds needed, and styling limitations that still existed due to inconsistencies with Firefox, Internet Explorer, and pre-Chromium Edge, at the time.
Now (2021), with Internet Explorer support being dropped left and right, and Edge now being Chromium-based, and Firefox quirks having been ironed out, these limitations have largely lifted.
Go read the whole thing on Scott’s site.
⏰ Last chance to join the Vanilla JS Academy! A new session of the Vanilla JS Academy starts on Monday. Register today and save 25%. Click here to join.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2021-09-27T14:30:00+00:00) Custom styling radio buttons and checkboxes. Retrieved from https://www.scien.cx/2021/09/27/custom-styling-radio-buttons-and-checkboxes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.