样式化 JQuery UI 滑块答案

【问题标题】：Styling the JQuery UI Slider样式化 JQuery UI 滑块
【发布时间】：2012-08-22 01:24:40
【问题描述】：

这是我对 JQuery UI 滑块的标记

<li class = "volume">
    <div class = "slider-vertical" style="height:50px; margin-left:4px;
     margin-top:-60px; background-color: black;" hidden></div>
</li>

我为此使用了内联样式。我的问题是，jquery 滑块的颜色怎么没有改变？即使我已将其设置为黑色？

【问题讨论】：

你应该避免使用内联样式，而是使用 jQuery 的 CSS 选择器（例如 .ui-widget-content）。
你能举个例子吗？
查看jqueryui.com/demos/slider 的主题选项卡。此外，从 jQuery UI 站点打开一个示例并查看如何应用 jQuery CSS。您可以编辑 CSS 或覆盖它。
我只应用了内联样式以获得快速结果并轻松查看它是否有效。

标签： jquery css jquery-ui styles

【解决方案1】：

您应该使用jQuery UI Themeroller 为您的 UI 组件设置样式并为您的实现生成自定义 CSS 文件，而不是尝试将内联样式应用于滑块。

许多 jQuery UI 组件使用图像作为背景，因此更新背景颜色通常不会产生预期的效果。使用 Themeroller 会给你最好的结果。

【讨论】：