Is there a way to style HTML5’s range control?

by

Turns out, there is in webkit:

 input[type="range"]{
   -webkit-appearance:none !important;
 }

 input[type="range"]::-webkit-slider-thumb{
   -webkit-appearance:none !important;  
 }

You can then add whatever attributes you need to each those selectors. Background, gradient, etc…

Hope that helps!

More Related Contents:

  1. Animate text for landing page
  2. How do you get the footer to stay at the bottom of a Web page?
  3. CSS – Equal Height Columns?
  4. Floating elements within a div, floats outside of div. Why?
  5. How to style HTML5 range input to have different color before and after slider?
  6. Margin-Top not working for span element?
  7. 2 column div layout: right column with fixed width, left fluid
  8. How to prevent long words from breaking my div?
  9. How to add a scrollbar to an HTML5 table?
  10. Center a div in CSS [closed]
  11. Font Awesome not working, icons showing as squares
  12. How do I style the HTML5 form validation error messages with CSS?
  13. Right to Left support for Twitter Bootstrap 3
  14. override css for html5 form validation/required popup
  15. CSS values using HTML5 data attribute [duplicate]
  16. Two divs, one fixed width, the other, the rest
  17. How would you make two s overlap?
  18. How to auto adjust the height according to content in it?
  19. layer on top of PDF
  20. Remove “whitespace” between div element
  21. why is my content showing outside the div?
  22. How to get these two divs side-by-side?
  23. Why use an HTML5 semantic tag instead of div? [duplicate]
  24. How to display and hide a div with CSS?
  25. How to make responsive table [closed]
  26. Why adds extra top margin?
  27. There is a 4px gap below canvas/video/audio elements in HTML5
  28. Style lower and upper fill in HTML5 range input
  29. Phonegap + Windows Phone 8 : viewport meta & scaling issue
  30. 100% DIV width is not really 100%

Leave a Comment