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

4 pointsevantish11y ago6 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?

6 comments

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

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

xvillain11y ago

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

jesusmichael11y 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?

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

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

j / k navigate · click thread line to collapse

6 comments

xvillain11y ago

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

xvillain11y ago

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

jesusmichael11y 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?

evantishOP11y ago

jesusmichael11y ago

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.

j / k navigate · click thread line to collapse