Ask HN: What are the technical reasons HTML inputs are impervious to CSS?

4 points by evantish 12 years ago | 6 comments

Select boxes, radio buttons, checkboxes, etc are often impossible to style unless you want to resort to absurd lengths. I've been dealing with this for years and just kind of accepted it. However, I assume there are some good reasons why. Does anyone know the story behind this seemingly straightforward engineering challenge?

I know the OS comes into play, but, why can't a browser just work around that?

xvillain 12 years ago |

It's related to something called the Shadow DOM (http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/) (http://code.tutsplus.com/tutorials/intro-to-shadow-dom--net-...) and our friends the render-engine makers just had a big internal 'argument' about the wisdom of exposing it [Encapsulation !] and how. Where it is accessible -- Chrome -- things are pretty sketchy. Personally, I'd think long and hard before enabling it and all but Google [and Opera] seem to agree, but last I heard, 'we' are not going to have much say in the matter since Google announced they will go ahead with it unilaterally.

evantish 12 years ago | |

Thanks for the info. Do you know of a thread that contains this Google-lead debate? Or, are we talking about poking around the Chromium Github commits and reading between the lines?

It sounds like, with the shadow DOM, a lot of the discussion is about performance. I'd be curious how an element like a checkbox could have that much impact on performance even on mobile.

xvillain 12 years ago | |

some of the 'debate' even spilled over here on HN : https://news.ycombinator.com/item?id=7243122

jesusmichael 12 years ago |

Do you want to style checkboxes and radio buttons? You can do this with CSS3... I'm not sure I understand what you are trying to do?

evantish 12 years ago | |

It's not a specific "how do I..." question. I have a lot of front-end experience and have always wondered why inputs present so many styling challenges. I'm aware there are some properties you can control, but, they're inconsistent, limited, and apparently arbitrary. For instance, try indenting the text of a select box option. That seems like it should be easy with CSS, but it's not. You have to manually (pre/ap)pend characters or go with a JS replacement approach. There are a lot of those little gotchas, and I'm curious if there are general reasons why that exist in a layer below what I'm used to working with.

jesusmichael 12 years ago | | |

That's a good question, but it maybe because at the root of it you have an object/class called check box and its attributes and methods are defined by object. These object are not rendered the same as formatting is by the browser.

So in your example that select box has a list method which doesn't have a property that supports indentation.

You'd have to write a new set of methods that extend the current form inputs. Depending on the browser I guess you could load as an extension or add-in.

Hope that helps.