html 样式输入范围前后

9njqaruj 于 2022-12-09 发布在其他

关注(0)|答案(5)|浏览(137)

我使用CSS-Tricks中的this method来设计输入范围的样式，并尝试使用before和after伪类。下面是我尝试过的代码：

input[type=range]::-webkit-slider-thumb:before {
    background: #fff;
}

这看起来并不管用。有人能帮我如何设计滑块轨道的样式吗？我需要一个纯CSS解决方案。本质上我想让它look like this。
我还将粘贴来自CSS技巧的代码：

input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  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: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}

Html

来源：https://stackoverflow.com/questions/28159866/style-input-range-before-and-after

5条答案

按热度按时间

ercv8c1e1#

在Firefox和IE中可以-

// Mozilla    
input[type="range"]::-moz-range-progress {
    background: #cc1a1a;
    height: 12px;
    border-radius: 12px;
}
// IE
input[type="range"]::-ms-fill-lower {
    background: #CC1A1A;
    border: 0 solid #000101;
    border-radius: 50px;
    box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d;
}
input[type="range"]::-ms-fill-upper {
    background: #c0c0c0;
    border: 0 solid #000101;
    border-radius: 50px;
    box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d;
}

只有一种方法是Chrome :before和:after，不再支持（自2016年3月）.我找到的最好的-是http://rangeslider.js.org/.它也与Angular JS -https://github.com/danielcrisp/angular-rangeslider工作得很好

赞(0）回复(0）举报 2022-12-09

hc8w905p2#

这是可能的！如果你的拇指不必比进度条大。
一些css向导提出了以下方法：https://codepen.io/noahblon/pen/OyajvN
它使用了一个方块阴影的拇指，使部分之前的拇指看起来不同的颜色。重要的是，范围已溢出隐藏，使其工作，这就是为什么拇指不能比轨道大。
第一个

赞(0）回复(0）举报 2022-12-09

iszxjhcz3#

有点延迟的回复在这里：

纯CSS解决方案在这里不可能跨浏览器- IE是唯一一个通过::-ms-fill-lower和::-ms-fill-upper实现这一点的解决方案

对于一个完整的跨浏览器解决方案，你需要使用js。这里有一个例子，它用输入的值更新CSS渐变，大致完成你想要的任务：http://codepen.io/ryanttb/pen/fHyEJ
您还可以在下面对类似问题的回答中找到相关信息：HTML5范围输入中的上下填充样式

赞(0）回复(0）举报 2022-12-09

yx2lnoni4#

据我所知，完全在CSS * 中跨浏览器 * 进行进度指示（即在句柄的不同侧使用不同的样式）是不可能的。
这里有一个想法，如何用一点javascript代码轻松地做到这一点：
https://css-tricks.com/sliding-nightmare-understanding-range-input/#the-range-progress-fill-component
下面是一个基于该方法生成CSS的工具：
https://toughengineer.github.io/demo/slider-styler
示例：
第一个

赞(0）回复(0）举报 2022-12-09

bvjxkvbb5#

如果有人也面临同样的问题，这里有一个（自制的）生成器，可以为这样一个进度条生成（纯）css：
https://antvil.github.io/css-sos/sos/progress/
生成的示例：