我对jquery的经验不是很丰富,但是ive设法在我的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之后声明的,因此我的css应该覆盖它。

最佳答案

您可以使用比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>

10-05 20:34
查看更多