CSS - 样式输入类型范围

Question

我有一个像这样的范围输入：

.volume{
    -webkit-appearance:none;
    width:100px;
    background:transparent;
}
.volume:focus{
    outline:none;
}
.volume::-webkit-slider-runnable-track{
    height:5px;
    cursor:pointer;
    background:Black;
    border:0.5px solid DimGrey;
    border-radius:5px;
}
.volume::-webkit-slider-thumb{
    -webkit-appearance:none;
    border:1px solid #444;
    width:30px;
    height:16px;
    text-align:center;
    margin-top:-5.5px;
    background:url("https://prototype.demixr.com/media/slider.png") center no-repeat;
}

<input class="d-inline-block volume" type="range" name="volume0" id="volume0" data-id="0" min="0" max="1" value="0.5" step="0.01">
<br />
<img src="https://prototype.demixr.com/media/ruler.png" alt="slider steps" class="levels_steps">

是否有可能让拇指图像溢出轨道，以便图像中心与下方的标尺在任一侧的极端对齐？

Answer 1

您所做的基本上是缩小拇指下方的音量刻度以适应开始和结束位置。然后在左侧添加一个边距，将比例图像推到起始位置。 然后将范围滑块本身的背景交换为使用边缘（左右）不透明的渐变，以确保滑块旋钮移动到滑块的末端位置并且不会仍然显示一些黑色像素。

代码现在应该可以在 Chrome 和 Firefox 中运行了。

代码：

.volume {
  -webkit-appearance: none;
  width: 120px;
  background: transparent;
}

.volume:focus {
  outline: none;
}

.volume::-webkit-slider-runnable-track {
  height: 5px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(12%, rgba(0, 0, 0, 0)), color-stop(12%, rgba(0, 0, 0, 1)), color-stop(88%, rgba(0, 0, 0, 1)), color-stop(88%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=1);
}

.volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #444;
  width: 30px;
  height: 16px;
  text-align: center;
  margin-top: -5.5px;
  background: url("https://prototype.demixr.com/media/slider.png") center no-repeat;
}

input[type=range]::-moz-range-track {
  height: 5px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(12%, rgba(0, 0, 0, 0)), color-stop(12%, rgba(0, 0, 0, 1)), color-stop(88%, rgba(0, 0, 0, 1)), color-stop(88%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=1);
}

input[type=range]::-moz-range-thumb
{
  -webkit-appearance: none;
  border: 1px solid #444;
  width: 30px;
  height: 16px;
  text-align: center;
  margin-top: -5.5px;
  background: url("https://prototype.demixr.com/media/slider.png") center no-repeat;
}

.levels_steps {
  width: 90px;
  margin-left: 17px;
}

<input class="d-inline-block volume" type="range" name="volume0" id="volume0" data-id="0" min="0" max="1" value="0.5" step="0.01">
<br />
<img src="https://prototype.demixr.com/media/ruler.png" alt="slider steps" class="levels_steps">

在正常情况下，我会在一个规则中将 CSS 规则分配给 Firefox 和 Chrome（.volume::-webkit-slider-runnable-track, .input[type=range]::-moz-range-track { ... } 但这要么使更改在 Chrome 或 Firefox 中消失，所以我复制了它。可能是由于浏览器特定的前缀-moz 和 -webkit。