HTML 范围样式 firefox。让拇指在边缘居中

Question

我正在尝试设置输入 [type=range] 的样式，并且已经完成了我在 chrome 和 safari 方面尝试做的事情，但我在为 Firefox 实现我想要的方面有点挣扎。在 Chrome/Safari 中，我可以使用::before 伪选择器来创建泪滴形状的拇指来拖动 slider ，但是::before 选择器不适用于 firefox 中的输入元素。因此，我必须设计拇指本身的样式。

拇指看起来应该如此，但是当您将它一直向左或向右滑动时，它的泪滴边缘会停止。我需要它在 slider 的每一侧超过 15px，以便它的“尖”部分指示 slider 上的当前位置。

我已经尝试过任何关于定位和边距的方法，但现在都没有成功。这里有人有任何提示吗？这是它的 jsFiddle:jsFiddle

这是我用来设置缩略图样式的 CSS 代码:

.ep-calc-tools-section .ep-calc-tool input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background: #3D3F44;
    border-radius: 0 50% 50% 50%;
    border: 3px solid #3D3F44;
    display: block;
    transform: translateY(-30px) rotate(224deg);
}

Answer 1

我也在尝试找出“正确”的答案。您可以做的一件事是将拇指的宽度和高度设置为 0，因此它看起来很小，然后将 scale() 添加到您的转换规则中以设置它的大小。

/* All the same stuff for Firefox */
.ep-calc-tools-section .ep-calc-tool input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    width:0;
    height:0;
    background: #3D3F44;
    border-radius: 0 50% 50% 50%;
    border: 3px solid #3D3F44;
    display: block;
    transform: translateY(-30px) rotate(224deg) scale(6);
}

https://jsfiddle.net/jLr26rvw/3/