-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;
}