search

jensimmons / cssremedy

Start your project with a remedy for the technical debt of CSS.
Mozilla Public License 2.0
2.18k stars 112 forks source link

Consistent and reliable form styles #41

Open scottkellum opened 5 years ago

scottkellum commented 5 years ago

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 commented 5 years ago

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

jensimmons commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

mirisuzanne commented 5 years ago

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

ollicle commented 5 years ago

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

stubbornella commented 5 years ago

@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.