4

I've themed HTML5 input range-thumb in one of my Client website using pseudo classes :after and :before and using the -webkit- prefix. And it was displaying all fine until I updated my Chrome browser (Desktop, Windows 7) to Version 49.0.2623.87 m.

Can anyone please suggest, what has changed here?

Thanks!

Here is the css I used for Chrome:

input.thickness {
  -webkit-appearance: none;
  float: left;
  width: 72%;
  margin-right: 20px;
  margin-top: 8px;
  margin-left: 0 /*for firefox*/;
  padding: 0 /*for IE*/;
}
input.thickness:focus::-webkit-slider-runnable-track {
  outline: none;
}
input.thickness::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background-color: #2f9de2;
  border-radius: 4px;
}
input.thickness::-webkit-slider-thumb {
  -webkit-appearance: none;
  position: relative;
  background: transparent;
  width: 22px;
  height: 12px;
  margin-top: 8px;
}
input.thickness::-webkit-slider-thumb:after,
input.thickness::-webkit-slider-thumb:before {
  bottom: 0;
  left: 0;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
input.thickness::-webkit-slider-thumb:after {
  border-color: rgba(136, 183, 213, 0);
  border-bottom-color: #2f9de2;
  border-width: 10px;
}
input.thickness::-webkit-slider-thumb:before {
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #2f9de2;
  border-width: 10px;
}
<input class="thickness" type="range" min="0" max="100" value="50" />
Knu
  • 14,806
  • 5
  • 56
  • 89
Ravi Khandelwal
  • 718
  • 1
  • 5
  • 15

1 Answers1

4

This is intentional. It's also on par with Gecko's behaviour.

Knu
  • 14,806
  • 5
  • 56
  • 89
  • Thanks for the URL. But couldn't summarize whether it'll be added back or not in future i.e. styling using pseudo classes. Can you shed a light on it, and if not then what is/will be the way to design the thumb? – Ravi Khandelwal Mar 16 '16 at 11:22
  • @RaviKhandelwal You can star the issue to be notified of an hypothetical reopening. It seems to me that it's gone for good. I only answered your original question; you should ask a separate one. – Knu Mar 16 '16 at 11:27