Consistent and reliable form styles

[scottkellum]

Form consistency and styling is one of the biggest hurdles I face when working. The box model, sizing, and font settings don’t inherit reliably. Attempts at normalizing forms often require vendor specific CSS.

I’d personally like to see the w3c take this on to create some standards in how form components should be styled, but it seems relevant to this project to remedy some of these issues. I’m curious how others work through these issues and what foundational styles you all find helpful.

[Malvoz]

Probably want to track progress (I encourage engagement) in https://github.com/WICG/form-controls-components 🎉

[jensimmons]

I definitely want to do this. Maybe in a separate style sheet, so it's easy to see.

I've started digging into best practices for form styling, given the current state of CSS.

Checkbox styling:
https://codepen.io/jensimmons/pen/KKPzxJa

Radio button styling:
https://codepen.io/jensimmons/pen/JjPXeqN

Text-area styling:
https://codepen.io/jensimmons/pen/dybXYOp

[mirisuzanne]

I know that Google & Microsoft are working on this already – and I think they are looking for input? I wonder if @stubbornella can speak to that more.

[jensimmons]

Greg Witworth has been taking the lead on this. I can tell you more in person, Mia.

[mirisuzanne]

oh right - I remember his article on it (which also seems like relevant context here).

[ollicle]

Adrian Roselli shared some thoughts recently suggesting text inputs and textareas ought to inherit additional text properties.

[stubbornella]

@mirisuzanne, that's right. @gregwhitworth and I are working together on this. Right now the goals are mainly a11y and a design refresh, but ultimately we'd both like to make things more styleable too.

So far, we've been researching tons of design systems and browsers to understand styles that reflect designer's choices. If there are styles in this project that I should look at too, please point me in the right direction. (@jensimmons I'd been hoping to talk more about this at tpac, but the travel didn't work out).

Fwiw, I don't think one standardized set of styles would work because they might not translate to new devices... e.g. what should a date input look like on a watch? tv? refrigerator? Some new thing we haven't thought up yet? I wouldn't feel comfortable trying to nail that down because folks keep inventing new, cool devices I never would have thought of... I would love to make them styleable though. That would add future flexibility and make remedies like this more powerful. And new devices easier to make webby.