Creating your own DOM DOM elements

Question

I always thought that you were able to access and override the style of the Shadow DOM elements. I saw an article on html5rocks that determines which specific selector web quotes 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 does not work properly - it seems that some sytle properties cannot be overridden. for example height and width However, it seems that setting the appearance of webkit stops it like a button.

It's true?

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

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

Answer 1

-webkit-appearance ( -moz-appearance) reset/ , . a div a button (. w3c, jsFiddle) reset select (. jsFiddle). , , , . -webkit-appearance:none; . (. ). , .

(jsFiddle):

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

. , jQuery UI, .

---

Edit:

-webkit-appearance .

: input[type="range"] -webkit-appearance: slider-horizontal. , . -webkit-appeareance: none; input[type="range"], , (. jsFiddle). , slider-horizontal, .

css :

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

background:green;

/* we have to set that, because it 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;
}