Question

我有一个脚本，它会生成滑块，然后更改select的值但我还想改变这个选中的背景颜色选项。请帮我！我想在活动或焦点状态选项上使蓝色颜色我不知道改变其他颜色。 select的每个值都必须具有其他背景颜色

＆＃13;

$(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);
  });

});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

试试这个，我实现了五点，你可以随意扩展

<div class="cont" style="width:400px;">

    <progress id="MyTicketsProgress" class="progress-bar" min="1" max="100" value="0"></progress>
    <div ID="L0" class="first border-change ProgressSpan" onclick="record(this,0)">
        <div class="ProgressTitle">0%</div>
    </div>
    <div ID="L25" class="second ProgressSpan" onclick="record(this,25)">
        <div class="ProgressTitle">25%</div>
    </div>
    <div ID="L50" class="third ProgressSpan" onclick="record(this,50)">
        <div class="ProgressTitle">50%</div>
    </div>
    <div ID="L75" class="fourth ProgressSpan" onclick="record(this,75)">
        <div class="ProgressTitle">75%</div>
    </div>
    <div ID="L100" class="fifth ProgressSpan" onclick="record(this,100)">
        <div class="ProgressTitle">100%</div>
    </div>
</div>

你的js功能：

function record(_this, ProgressValue) {
if ($(_this).hasClass('first')) {
    $(_this).parent().find('.progress-bar').val('0');
    //$('#progress-bar').val('0');
    $(_this).nextAll().removeClass('border-change');
} else if ($(_this).hasClass('second')) {
    $(_this).nextAll().removeClass('border-change');
    $(_this).parent().find('.progress-bar').val('25');
    $(_this).prevAll().addClass('border-change');
    $(_this).addClass('border-change');
} else if ($(_this).hasClass('third')) {
    $(_this).nextAll().removeClass('border-change');
    $(_this).parent().find('.progress-bar').val('50');
    $(_this).prevAll().addClass('border-change');
    $(_this).addClass('border-change');        
} else if ($(_this).hasClass('fourth')) {
    $(_this).nextAll().removeClass('border-change');
    $(_this).parent().find('.progress-bar').val('75');
    $(_this).prevAll().addClass('border-change');
    $(_this).addClass('border-change');
} else {
    $(_this).parent().find('.progress-bar').val('100');
    $(_this).addClass('border-change');
    $(_this).prevAll().addClass('border-change');
}

}

为css：

.cont{


 height: 100%;  
  padding: 0;
  margin: 0 auto;
  position:relative;
  margin-top:-15px;

}
.progress-bar,.progress-bar[role]{
     -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  color: red; /*For progress color in IE*/
  height: 2px;
  margin: 0 auto;
  border: none;
  background-size: auto;

}

.progress-bar,                          /* Firefox  */ 
.progress-bar[role][aria-valuenow] {    /* Polyfill */
   background: #eae5e5 !important; /* !important is needed by the polyfill */
}

.progress-bar[aria-valuenow]:before  {
    background: red !important;
}

/* Polyfill */
.progress-bar[role]:after {
    background-image: none; /* removes default background from polyfill */

}


/* Polyfill - Safari */
.progress-bar:not([value])  {
    background-color: red !important;
    background-size: auto;  /* Needs to be in here for Safari */
}



.ProgressSpan {
  height: 10px;
  width: 10px;
  border-radius: 100%;
  border: 4px solid #eae5e5;
  background:#eae5e5;
  position: absolute;
  left:0;
  top: 5px;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

.ps-not-clickable {
    cursor:initial !important;
}

.InclickableProgressSpan {
  cursor: default;  
}

.second{
  left: 25%;
}
.third{
  left: 50%;
}
.fourth{
  left: 75%;
}
.fifth{
  left: 100%;
}

.progress-bar::-webkit-progress-value{ /* Changes line color */
  background-color: red;
  transition: all 0.4s ease-in-out;


  /* For Safari 3.1 to 6.0 */
    -webkit-transition-property: width;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 0s;
    /* Standard syntax */
    transition-property: width;
    transition-duration: 0.4s;
    transition-timing-function: linear;
    transition-delay: 0s;
}



.progress-bar::-moz-progress-bar {  /* Changes line color */
  background-color: red;
  transition: all 0.4s ease-in-out;
}


.progress-bar::-webkit-progress-bar{ /* Changes background color */
  background-color: #eae5e5;
}
.border-change{
  border-color:red;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.ProgressTitle {
padding-top:20px;color:#989797;font-size:0.5em;font-weight:bold;
}

Javascript在范围滑块的选择选项中更改背景颜色

1 个答案: