Styling native Shadow DOM elements

Question

I always believed that you were able to access and override the styling on Shadow DOM elements. I saw the article on html5rocks which defines what webkit specific selectors you can use: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: blue;
  width: 10px;
  height: 40px;
}

However when I tried this is doesn't work as expected - it appears as though some of the sytle properties cannot be overridden. e.g. height and width However it does seem that setting the webkit appearance does stop it looking like a button.

Is this true?

What I would like to do is style the range slider so that the handle and track can be a different colour.

Here is simple demo: http://jsfiddle.net/sidonaldson/dCKd3/ I can hide the button but when I set a background colour it pops back!

Answer 1

-webkit-appearance (or -moz-appearance) is thought to reset/update the browser-style for an element, e.g. to style a div like a button (see w3c reference, and this jsFiddle), or reset the style of a select (see this jsFiddle). If you browse with an apple mobile device for example, you will see buttons are rounded by default. -webkit-appearance:none; will prevent that. (see also here). It seems it is not fully implemented on desktop browsers, yet.

I was able to achieve the effect you desire with (jsFiddle):

input[type=range]::-webkit-slider-thumb {
    -webkit-box-shadow: inset 0 0 10px 10px yellow;
}

However, this is a hacky solution. If you want fully customizable controlls I would recommend jQuery UI which is also browser-indepentent and does not rely on experimental browser features.

---

Edit:

You can find a list of values for -webkit-appearance here.

The problem with your first attempt is, input[type="range"] has set -webkit-appearance: slider-horizontal. This inherits to the children, and you're not able to set the background. When you add -webkit-appeareance: none; also to the input[type="range"], you can set the background color to what you want (see jsFiddle). You just have to set the width and height of the slider-thumb, because you just removed the slider-horizontal appearance which did that for you.

The new css would be:

input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
outline:solid 1px yellow;  

background:green;

/* we have to set that, because it's not inherited anymore */
width: 10px;
height: 20px;

}

input[type=range] {
    -webkit-appearance: none; /* this is important */
}

input[type=range]::-webkit-slider-runnable-track {
    background:red;
}