Question

我不是那种经验丰富的jquery但是我设法在我的html中设置了一个jquery ui价格滑块，特别是这个 - https://jqueryui.com/resources/demos/slider/range.html

现在我试图自定义它。我想改变像悬停，拖动颜色，使它们成为圆形滑块以及薄而不是厚的东西，但我无法在线找到任何关于如何的文档。

我试过检查元素并从那里获取类，这只能用于禁用滑块的轮廓。

.ui-slider-handle {
  outline: 0;
  background: purple;
  border-radius: 50%;
}

所以我知道这会以滑块为目标，但更改颜色或边框半径不会做任何事情。我的css是在jquery ui css之后声明的，所以我的确应该覆盖它。

Answer 1

您可以使用比jQuery更高的specificity来自定义滑块的样式。这样您就不必费心，首先包含哪些CSS声明，将适用具有更高特异性的规则。

这是一个工作示例。除了不同元素的类选择器之外，我还使用父选择器#slider来提高特异性：

$(function() {
  $("#slider").slider();
});

#slider .ui-slider-handle {
  outline: 0;
  background: purple;
  border-radius: 50%;
  top: -.6em;
}

#slider.ui-slider-horizontal {
  top: 1em;
  left: 5%;
  height: .1em;
  width: 90%;
  border: none;
  background: #ccc;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider"></div>

自定义Jquery UI滑块样式

1 个答案: