如何更改输入元素的背景属性？答案

【问题标题】：How do I change the background property on input element?如何更改输入元素的背景属性？
【发布时间】：2017-02-26 05:13:14
【问题描述】：

我有一个 HTML5 视频播放器，底部有一个 CSS 样式的轨迹栏。我想用jQuery来改变轨迹栏的样式。

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

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

由于视频轨道栏位于一个名为“video-controls”的分区中。

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

在 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 属性？

【问题讨论】：

当你有（更合适的）可用的 CSS 时，为什么要使用 jQuery 来执行此操作？
我正在使用 CSS 来设置轨迹栏的样式，我希望使用 jQuery 根据客户的喜好以编程方式更改 css。
如果你喜欢使用 jQuery 和 CSS，我更喜欢使用 .addClass('other-background-color')
颜色由客户端定义，我不能有额外的类待机。
我认为没有办法。 jQuery 和访问伪类不起作用。

标签： jquery css html

【解决方案1】：

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

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

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

这里你明白我所说的“即时”是什么意思：Create a CSS rule / class with jQuery at runtime

【讨论】：

【解决方案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 设置会被覆盖。

【讨论】：

我想你可能误解了我的问题。
按钮本身到底是什么意思？滑块拇指？
问题是关于使用 jQuery/javascript 以编程方式更改 css 属性以使其响应客户需求，我没有使用浏览器默认样式。我在问题中引用的 css 是我已经应用于 CSS 中的 Slider Thumb 的 css 样式示例。如果客户希望，我现在需要在运行时更改它。我说得通吗？
@Single Entity 好吧，我想我真的误解了你。相应地编辑了我的答案。
别担心，这可能是我的问题不够清楚。