css - 更改 jquery 移动滑块旋转按钮的颜色

Question

我正在使用 jquery 移动滑块按钮

<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" step="5" />

滑块会自动生成文本输入，并且在 Chrome 中，它还会在文本输入中放置一个旋转按钮。有人知道如何更改此旋转按钮的颜色吗？

Answer 1

您可以使用不同的主题或使用主题滚轮

从这里复制：如果您只想摆脱向上/向下箭头，可以将输入包装在具有指定宽度/高度的元素中，并且overflow : hidden：

$(".ui-slider-input").wrap($('<div />').css({
    position : 'relative',
    display  : 'inline-block',
    height   : '36px',
    width    : '45px',
    overflow : 'hidden'
}));

Answer 2

好吧，除非它们是 HTML 元素，否则您不能更改滚动条/旋转按钮的颜色。IE 是一个例外，它允许这样做，但它又不是网络标准，在其他任何地方都不受支持。作为一种解决方法，您可以隐藏浏览器创建的旋转按钮，并将其替换为您自己的自定义旋转按钮，该按钮由 DIV 标记组成，并带有适当的事件处理程序。