Chrome忽略输入范围的CSS样式

时间:2017-03-22 09:45:47

标签: html css html5

制作一个简单的网络混合物,但Chrome似乎不喜欢我的CSS用于我的范围滑块上的拇指。他们的轨道似乎运作得很好(或者足够好,以至于我可以解决任何我不满意的事情)。

input[type=range] {
  -webkit-appearance: slider-vertical;
  width: 20px;
  height: 80%;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 30px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 20px;
  height: 80%;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #434546;
  border: 0.2px solid #010101;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 40px;
  width: 30px;
  border-radius: 3px;
  background: #ffffff;
  -webkit-appearance: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #434546;
}
<div class="container">
  <input type="range" />
</div>

大部分内容来自,但我做了一些更改:http://danielstern.ca/range.css/#/

3 个答案:

答案 0 :(得分:0)

在Codepen代码段中找到了解决方案,您必须将-webkit-appeareance: none设置为以下字段:

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  background: transparent; /* Otherwise white in Chrome */
}

整个示例https://codepen.io/freoted/pen/bENyzL

答案 1 :(得分:0)

这也发生在我身上,解决方案很简单,但是这使我浪费了很多时间调查原因。解决方案分别放在-webkit-appearance: none;和runnable-track中。 (我猜是铬的东西)

input[type=range]::-webkit-slider-runnable-track {
-webkit-appearance: none;
width: 20px;
height: 80%;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #434546;
border: 0.2px solid #010101;
}

input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 40px;
width: 30px;
border-radius: 3px;
background: #ffffff;
-webkit-appearance: none;
}

本文可以为您http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html

提供帮助

答案 2 :(得分:-2)

working the same for me 

<!DOCTYPE html>
<html ><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">
input[type=range] {
  -webkit-appearance: slider-vertical;
  width: 20px;
  height: 80%;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 30px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 20px;
  height: 80%;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #434546;
  border: 0.2px solid #010101;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 40px;
  width: 30px;
  border-radius: 3px;
  background: #ffffff;
  -webkit-appearance: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #434546;
}</style></head><body >
<div class="container">
  <input type="range" />
</div></body></html>