HTML 5 输入范围缩略图在更新 Chrome 到版本 49 后消失

Question

我在我的一个客户网站中使用伪类 :after 和 :before 并使用 -webkit- 主题为 HTML5 输入范围缩略图字首。在我将 Chrome 浏览器（桌面，Windows 7）更新到版本 49.0.2623.87 m.

之前，它显示一切正常

任何人都可以提出建议，这里发生了什么变化？

谢谢！

这是我用于 Chrome 的 css:

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" />

Answer 1

这是intentional. It's also on par with Gecko's behaviour。

HTML 5 输入范围缩略图在更新 Chrome 到版本 49 后消失

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

html

css

blink