

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

Select boxes, radio buttons, checkboxes, etc are often impossible to style unless you want to resort to absurd lengths. I&#x27;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?<p>I know the OS comes into play, but, why can&#x27;t a browser just work around that?
======
xvillain
It's related to something called the Shadow DOM
([http://glazkov.com/2011/01/14/what-the-heck-is-shadow-
dom/](http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/))
([http://code.tutsplus.com/tutorials/intro-to-shadow-dom--
net-...](http://code.tutsplus.com/tutorials/intro-to-shadow-dom--net-34966))
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
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.

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

