Geek Answers Handbook

HTML 5-thumb input range disappeared after updating Chrome to version-49

I am using the HTML thumb input range on one of my client sites, using pseudo-classes :afterand :beforeand using a prefix -webkit-. And it showed everything well until I updated the Chrome browser (desktop, Windows 7) to version 49.0.2623.87 m.

Can anyone suggest what has changed here?

Thank!

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" />
Run codeHide result
+4
source share

More articles:


All Articles