如何更改input元素的background属性？

Question

我有一个HTML5视频播放器，底部有一个轨道栏，在CSS中设置了样式。我想用jQuery来改变音轨的风格。

使用jQuery，我可以使用以下方式设置轨迹栏的背景样式：

$('#video-controls').css("background", "rgb(0,110,135)");

由于视频轨道栏位于一个名为＆＃39;视频控件的ID的分部中。

但是这会使滑块按钮本身保持原始颜色（绿色）。

在CSS中，滑块定义如下：

input[type=range].slider::-moz-range-thumb 
{
  box-shadow: 0.8px 0.8px 1.9px rgba(0, 0, 62, 0.67), 0px 0px 0.8px rgba(0, 0, 88, 0.67);
  border: 1.9px solid rgba(0, 30, 0, 0.57);
  height: 16px;
  width: 32px;
  border-radius: 4px;
  background: #a4b93f;
  cursor: pointer;
}

我试过了

$("input[type=range].slider::-moz-range-thumb").css("background", "rgb(0,110,135)");

但它没有做任何事情。如何更改背景css属性？

Answer 1

我更喜欢使用.addClass('other-background-color')并通过CSS设置控件样式。

但提问者需要做这个基于客户端。 所以jQuery和伪选择器不起作用。

一个想法是“动态”创建具有不同背景的类，并通过jQuery .addClass('user-background')

添加

在这里，您可以“动态地”看到我的意思：Create a CSS rule / class with jQuery at runtime

Answer 2

你不需要任何JavaScript。到目前为止，你的CSS似乎没问题。为避免滑块拇指保持原始状态，您需要告诉浏览器停止使用其默认值。

对于Firefox，您可以添加：

input[type=range],
input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
}

在Chrome上你可以使用它：

input[type=range],
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

修改

为了动态设置拇指颜色，您可以使用JavaScript来改变CSS。一个例子看起来像这样。 https://jsfiddle.net/tet9fm6m/

document.styleSheets[0].addRule('input[type=range]::-webkit-slider-thumb', 'background: green');

为此，只需将css文件中的背景颜色留空即可。否则，您的JavaScript设置将被覆盖。