html – 样式输入范围看起来像进度条

概述我有一个视频元素,我想创建自己的控制播放器. 我正在使用搜索栏的范围输入.我想这样做的样式： 所以橙色就是你所看到的,而蓝绿色则是剩下的时间. 我设法像这样输入样式：https://jsfiddle.net/d3oeztwt/但我不知道橙色. 我知道我可以使用进度条,但我找不到用进度条触发滑块的方法. <input type="range">input[type=range] { / 我有一个视频元素,我想创建自己的控制播放器.

我正在使用搜索栏的范围输入.我想这样做的样式：

所以橙色就是你所看到的,而蓝绿色则是剩下的时间.

我设法像这样输入样式：https://jsfiddle.net/d3oeztwt/但我不知道橙色.

我知道我可以使用进度条,但我找不到用进度条触发滑块的方法.

@H_301_12@<input type="range">input[type=range] { /*removes default webkit styles*/ -webkit-appearance: none; /*required for proper track sizing in FF*/ wIDth: 300px;}input[type=range]::-webkit-slIDer-runnable-track { wIDth: 300px; height: 10px; background: #009999; border: none; border-radius: 3px;}input[type=range]::-webkit-slIDer-thumb { -webkit-appearance: none; border: none; height: 20px; wIDth: 20px; border-radius: 50%; background: #99FFFF; margin-top: -4px;}input[type=range]:focus { outline: none;}解决方法 我用SCSS做了一个跨浏览器的解决方案(IE9,ff,Chrome,safari),没有JavaScript.

http://codepen.io/nlfonseca/pen/MwbovQ

@H_301_12@@import 'bourbon';$slIDer-wIDth-number: 240;$slIDer-wIDth: #{$slIDer-wIDth-number}px;$slIDer-height: 2px;$background-slIDer: #c7c7c7;$background-filled-slIDer: #e33d44;$thumb-wIDth: 28px;$thumb-height: 18px;$thumb-radius: 8px;$thumb-background: #fff;$thumb-border: 1px solID #777;$shadow-size: -8px;$fit-thumb-in-slIDer: -8px;@function makelongshadow($color,$size) { $val: 5px 0 0 $size $color; @for $i from 6 through $slIDer-wIDth-number { $val: #{$val},#{$i}px 0 0 $size #{$color}; } @return $val;}div { height: 100px; display: flex; justify-content: center;}input { align-items: center; appearance: none; background: none; cursor: pointer; display: flex; height: 100%; min-height: 50px; overflow: hIDden; wIDth: $slIDer-wIDth; &:focus { Box-shadow: none; outline: none; } &::-webkit-slIDer-runnable-track { background: $background-filled-slIDer; content: ''; height: $slIDer-height; pointer-events: none; } &::-webkit-slIDer-thumb { @include size($thumb-wIDth $thumb-height); appearance: none; background: $thumb-background; border-radius: $thumb-radius; Box-shadow: makelongshadow($background-slIDer,$shadow-size); margin-top: $fit-thumb-in-slIDer; border: $thumb-border; } &::-moz-range-track { wIDth: $slIDer-wIDth; height: $slIDer-height; } &::-moz-range-thumb { @include size($thumb-wIDth $thumb-height); background: $thumb-background; border-radius: $thumb-radius; border: $thumb-border; position: relative; } &::-moz-range-progress { height: $slIDer-height; background: $background-filled-slIDer; border: 0; margin-top: 0; } &::-ms-track { background: transparent; border: 0; border-color: transparent; border-radius: 0; border-wIDth: 0; color: transparent; height: $slIDer-height; margin-top: 10px; wIDth: $slIDer-wIDth; } &::-ms-thumb { @include size($thumb-wIDth $thumb-height); background: $thumb-background; border-radius: $thumb-radius; border: $thumb-border; } &::-ms-fill-lower { background: $background-filled-slIDer; border-radius: 0; } &::-ms-fill-upper { background: $background-slIDer; border-radius: 0; } &::-ms-tooltip { display: none; }} 总结

以上是内存溢出为你收集整理的html – 样式输入范围看起来像进度条全部内容，希望文章能够帮你解决html – 样式输入范围看起来像进度条所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。