我正在尝试使用进度条创建范围输入。我找到了这个解决方案
input {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
min-height: 50px;
overflow: hidden;
width: 240px;
}
input:focus {
box-shadow: none;
outline: none;
}
input::-webkit-slider-runnable-track {
background: #e33d44;
content: '';
height: 2px;
pointer-events: none;
}
input::-webkit-slider-thumb {
height: 18px;
width: 28px;
-webkit-appearance: none;
appearance: none;
background: #fff;
border-radius: 8px;
box-shadow: 5px 0 0 -8px #c7c7c7, 6px 0 0 -8px #c7c7c7, 7px 0 0 …Run Code Online (Sandbox Code Playgroud)