将滑块垂直手柄更改为图像答案

【问题标题】：Change Slider Vertical Handle to Image将滑块垂直手柄更改为图像
【发布时间】：2016-05-26 07:18:38
【问题描述】：

我正在使用 jquery-ui-1.10.3.custom.min.css 并尝试将滑块句柄更改为图像。

当我使用以下 CSS 和 HTML 时，它可以工作。

CSS：

.slider-basic .ui-slider-handle {
   width:50;
   height: 50;
   background: url(images/slider/50x50.png) no-repeat;
   border: none;
}

HTML：

<html>
    <div class="slider slider-basic bg-red"></div>
</html>

但是我需要把我的滑块改成垂直的，所以 HTML 变成了

<div id="slider-vertical" class="slider bg-green"></div>

而且 CSS 似乎根本不起作用。你能帮我找出原因吗？

【问题讨论】：

请分享你的css
您使用了 .slider-basic .ui-slider-handle 类，但我在您的 HTML 中没有看到，它是由 JQuery UI 即时加载的吗？
我将 .slider-basic 更改为 .slider-vertical... 但什么也没发生。我想知道我应该更改哪个代码
除此之外的css是jquery-ui-1.10.3.custom.min.css
CSS 需要 #slider-vertical .ui-slider-handle 作为选择器，因为您使用的是 ID 而不是类。

【解决方案1】：

如果 HTML 是这样的：

<div id="slider-vertical" class="slider bg-green"></div>

您需要以下 CSS：

#slider-vertical .ui-slider-handle {
   background: url(images/slider/50x50.png) no-repeat;
   border: none;
}

在您之前的 HTML 中，您设置了类。在这个新的 HTML 中，您设置了 ID。

【讨论】：