Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Styling input type range elements in Webkit browsers

Tags:

html

css

webkit

Is there any way to style <input type="range"> elements for Webkit browsers?

like image 618
Vinay Verma Avatar asked Dec 15 '10 09:12

Vinay Verma


2 Answers

There is a pretty good article on styling a range to make it look like an iPhone slider written by David B. Calhoun.

I think the blog post should cover most aspects of styling a range input type.

Here is some of the CSS:

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 68px;
    height: 44px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #fefefe),
        color-stop(0.49, #dddddd),
        color-stop(0.51, #d1d1d1),
        color-stop(1, #a1a1a1)
    );
    background-repeat: no-repeat;
    background-position: 50%;
}
like image 143
gak Avatar answered Oct 04 '22 03:10

gak


I've only heard of the type range, not slider.

input[type="range"] {
    -webkit-appearance: slider-horizontal;
}
like image 27
BoltClock Avatar answered Oct 04 '22 03:10

BoltClock