Question

也许标题不是最好的，但我完全不知道如何问这个。

我正在开发一些东西，我需要一个非常简单的html范围滑块。

我可以完美地定制它，所以它不是问题但经过测试后很多......它看起来像： - 手机和平板电脑完美运行（仅通过Chrome开发者工具测试） - 桌面（因此，使用鼠标）它有问题。

问题： 大部分时间......它被窃听。单击它并移动光标然后再次单击以修复我的选择...它不会停止聚焦，因此光标仍然移动...所以这意味着我无法选择一个值。所以，性交和刷新。

这个滑块位于一个巨大的形式的末尾，因此，在创建所有人之后如果有人必须刷新......那就太糟糕了。

这是我的布局：

<input type="range" step="10" min="10" max="50" value="50">

除自定义css外没有其他样式。顺便说一句，我不知道为什么......当光标移动时，线条会消失。它不会发生在我身上

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    margin: 10px 0;
}
input[type=range]:focus {
    outline: 0;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 0px;
    cursor: pointer;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
    background: rgba(204, 204, 204, 0.78);
    border-radius: 0px;
    border: 1px solid #cccccc;
}
input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 0px solid #000000;
    height: 20px;
    width: 20px;
    border-radius: 50px;
    background: #46e5d2;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -11px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: rgba(214, 214, 214, 0.78);
    outline: 0;
    border: none;
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 0px;
    cursor: pointer;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
    background: rgba(204, 204, 204, 0.78);
    border-radius: 0px;
    border: 1px solid #cccccc;
}
input[type=range]::-moz-range-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 0px solid #000000;
    height: 20px;
    width: 20px;
    border-radius: 50px;
    background: #46e5d2;
    cursor: pointer;
}
input[type=range]::-ms-track {
    width: 100%;
    height: 0px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: rgba(194, 194, 194, 0.78);
    border: 1px solid #cccccc;
    border-radius: 0px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
    background: rgba(204, 204, 204, 0.78);
    border: 1px solid #cccccc;
    border-radius: 0px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 0px solid #000000;
    height: 20px;
    width: 20px;
    border-radius: 50px;
    background: #46e5d2;
    cursor: pointer;
    height: 0px;
}
input[type=range]:focus::-ms-fill-lower {
    background: rgba(204, 204, 204, 0.78);
    outline: 0;
}
input[type=range]:focus::-ms-fill-upper {
    background: rgba(214, 214, 214, 0.78);
    outline: 0;
}

Answer 1

小心！您已将滑块的高度设置为0px！它使得当你使用它时，栏会消失！只需将其设置为其他内容

input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 0px;  //change this!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
cursor: pointer;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
background: rgba(204, 204, 204, 0.78);
border-radius: 0px;
border: 1px solid #cccccc;

}

正如您在此处所见，现在它正常运作https://jsfiddle.net/96es9zrt/1/

输入范围html5无法获得价值

1 个答案: