【发布时间】：2017-09-15 14:23:29
【问题描述】：
我有一个脚本可以制作滑块然后更改选择的值 但我也想改变这个选定的背景颜色 选项。请帮我 ！ 我想在活动或焦点状态选项上设置蓝色，我不知道更改为其他颜色。 select 的每个值都必须有其他背景颜色
$(function() {
var select = $("#minbeds");
var slider = $("<br><div id='slider'></div>").insertAfter(select).slider({
min: 1,
max: 10,
range: "min",
value: select[0].selectedIndex + 1,
slide: function(event, ui) {
select[0].selectedIndex = ui.value - 1;
}
});
$("#minbeds").on("change", function() {
slider.slider("value", this.selectedIndex + 1);
});
});.selecttodiv {
display: inline;
height: 2.3em;
-webkit-appearance: none;
-moz-appearance: none;
border: none;
margin-top: 15px;
width: 900px;
}
.selecttodiv option {
display: inline-block;
width: 2.1em;
height: 2.1em;
border-radius: 460%;
text-align: center;
border: 1px solid black;
margin-left: 25px;
}
#slider {
margin-left: 10px;
margin-top: 100px;
background: linear-gradient(to right, #FF5858 0%, #FF5858 30%, #FF9363 30%, #FF9363 80%, #79DB77 80%, #79DB77 100%);
width: 800px;
height: 0.4em;
}
#slider>div:nth-child(1) {
/* background: yellow; */
/* background: linear-gradient(to right, red 0%, red 33%, orange 33%, orange 66%, green 66%, green 100%); */
background: transparent;
}
#slider>span:nth-child(2) {
top: -.8em;
border-radius: 50px;
width: 30px;
height: 30px;
}
option:active {
background: red;
}<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Slider - Slider bound to select</title>
<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>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<form id="reservation">
<select class="selecttodiv" name="minbeds" id="minbeds" size="2">
<option class="red" selected >1</option>
<option class="red">2</option>
<option class="red">3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</form>
</body>
</html>【问题讨论】：
-
every value of select must have other background color没看懂需求，哪里来的颜色？每个选择应该是什么颜色？ -
通过移动滑块，选中的值被高亮，如果选中的值=1必须用红色高亮，选中的值为8的绿色等。
-
我的建议是更改标记并避免使用 select 元素，原因是每个浏览器都有自己特定的呈现 select 元素的方式，并且它的自定义是棘手和有限的。作为一个例子，我可以告诉如果我移动滑块，我可以看到只有蓝色背景的选定项目是选择获得焦点。您仍然可以使用 select 来提交表单，但作为隐藏元素。
-
但是对于另一个元素，这种形式的滑块并不想工作:(
标签： javascript jquery