我对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>