[whatwg] Styling form controls (Was: Re: Forms-related feedback)

[Jonas Sicking]

On Tue, Dec 3, 2013 at 11:38 AM, Ian Hickson <ian at hixie.ch> wrote:
>> The real fix is to allow styling formcontrols. It's one of the most
>> requested features from web developers, yet no one has taken the time to
>> research what it would take to do it.
>
> Isn't that what Web Components is for?

Not at all.

However the Shadow DOM spec gets us closer to one approach to it. It
lets you replace the rendering of an element with something more
complex than what CSS can describe.

But there's still no spec that enables you to "turn off" the native
rendering of a form control and just use the normal CSS+Shadow DOM
specs to define the rendering.

And you still have to use a pile of JS APIs in order to hook up the
Shadow DOM. So even something as simple as styling a checkbox as a
switch would not be possible to do using just CSS. I.e. developer
ergonomics are still worse than a lot of other styling.

And Shadow-DOM doesn't let you style an existing control, just fully
replace the rendering. So styling a textfield means doing a full
editor with all the crappiness that contentEditable pulls in. Yes, a
lot of the contentEditable stuff can and should be improved, so
possibly this could be as simple as sticking a <span contenteditable
plaintextonly=true> in there one day.

But building a full <select> just because because you wanted to make
the list-of-options-box a specific size seems unfortunate.

Additionally, replacing the rendering rather than styling it is
hostile towards new platforms. If everyone had used Shadow-DOM to
build their own rendering for <select>s that would have made the
transition to mobile much more painful since you'd get a tiny custom
<select> UIs rather than a more platform-appropriate picker.

And then there's of course the separate-but-related issue of being
able to style scrollbars, which is another reason websites create
sea-of-divs pages today. The reason this is related is that the
challenges styling form controls isn't really related to form
controls, but rather related to styling of UA-provided UI. Scrollbars
is another such UI.

So no. I think we are still very far from stylable form controls. And
it's hurting the web a whole lot.

/ Jonas