时间戳

首页 > 解决方案 > CSS - 样式输入类型范围

html - CSS - 样式输入类型范围

问题描述

我有一个范围输入，如下所示：

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

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

标签： htmlcssinput-type-range

解决方案

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

该代码现在应该可以在 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.

推荐阅读