una.im | Updates to the customizable select API
It’s great to see the evolution of HTML happening in response to real use-cases—the turbo-charging of the select element just gets better and better!
On the styling of forms by Bruce Lawson
Bruce takes a look at the tricky issue of styling native form controls. Help us, Shadow DOM, you’re our only hope!
Related links
Progressively Enhanced Form Validation, Part 1: HTML and CSS – Cloud Four
A great reminder of just how much you can do with modern markup and styles when it comes to form validation. The :user-invalid and :user-valid pseudo-classes are particularly handy!
Accessible custom styled form elements - Rian Rietveld
An excellent level-headed evaluation of styling and scripting form controls, weighing up the benefits and trade-offs. The more tightly you control the appearance, the less you get to benefit from the functionality (and accessibility) that the browser gives you for free …meaning you’ve now to got to work harder to replace it.
HTML elements like check buttons, radio buttons or select options can be hard to style with CSS in a custom design. There are many workarounds for this, but are they accessible?
GOV.UK elements
I really like the clear styling of checkboxes and radio buttons in the GDS pattern library. Fitts’s law in action.
Line-height in input fields | 456 Berea Street
This abuse of the !important declaration in Firefox’s user-agent stylesheet was driving me crazy recently. Roger proposes a CSS patch, but this is really something that needs to be fixed in the browser.
Related posts
Accent all areas
A small but important addition to CSS.
Placehold on tight
Getting consistent browser behaviour for the placeholder attribute.
The design of datalist
Have your combo-box cake and eat your select fallback too.
An nth-letter selector in CSS
The latest installment in the long tradition of calling for this pseudo-element.