如何设置输入类型=“范围”的样式[重复]

Question

我在设计这个元素的样式时有点吃力。我以前从未这样做过，我真的找不到解决问题的方法。

我只想添加 border-radius 到边缘，添加一些 box-shadow 到那个点，这是可拖动的，我问的主要原因是，如何将较低的不透明度添加到尚未选择的一侧。

我不知道它是否必须通过 Javascript 来完成，或者我可以简单地用 css 来完成，但我的问题是：

这就是我的范围现在的样子

我的目标是这个

由于我以前从未设置过此元素的样式，所有这些 css 都来自我在 Google 上找到的多篇文章。有没有像 background:active 和 background:unactive 这样的东西？

谢谢。

.container{
  background-color:red;
  width:30%;
  padding:1em;
  text-align:center;
}

input[type="range"]{
    width: 100%;
}

input[type=range]{
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    height: .35em;
    background: white;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 1.1em;
    width: 1.1em;
    border-radius: 50%;
    background: white;
    margin-top: -4px;
}

input[type=range]:focus {
    outline: none;
}

<div class="container">
  <div className="range">
      <p className="heading">HEIGHT</p>
       <input type="range"></input>

       <p className="heading">WEIGHT</p>
       <input type="range"></input>
  </div>
</div>

Answer 1

请试试这个.. 并在 css 中给transitions 以更具吸引力

function rangeValFunc(rangeVal){
  var rangeWidth = document.getElementById("tooltiptext").textContent = rangeVal+"cm";
  document.getElementById("tooltiptext").style.left = "calc("+rangeVal+"% - 50px)";
}

.container {
  background:#eb6c5b;
  padding:20px;
}
input[type="range"]{
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  outline: none !important;
  appearance:none;
  border:none;
  border-radius:30px;
}
input[type="range"]::-moz-focus-outer {
    border: 0;
}
input[type="range"]:hover {
  outline:none;
}

/* Chrome */

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 9px;
  height: 9px;
  background: #4CAF50;
  cursor: pointer;
  border-radius:30px;
  outline:none;
}

/* Moz */

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #f1f9f4;
  cursor: pointer;
  border-radius:50%;
  border:none;
  outline:none;
}
input[type="range"]::-moz-range-progress {
  background-color: #fff;
    height: 100%;
  border-radius:30px;
  border:none;
}
input[type="range"]::-moz-range-track {  
  background-color: #ccc;
  border-radius:30px;
  border:none;
    height: 100%;
}

/* IE*/

input[type="range"]::-ms-fill-lower {
  background-color: #fff;
    height: 100%;
  border-radius:30px;
  border:none;
}
input[type="range"]::-ms-fill-upper {  
  background-color: #ccc;
  border-radius:30px;
  border:none;
    height: 100%;
}

/* tooltip style */
.tooltip {
  position:relative;
  padding:30px 0;
  
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 100px;
  background-color: #f38080;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top:-5px;
  left:calc(50% - 50px);
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #f38080 transparent transparent transparent;
}

<div class="container">
  <div class="tooltip">
    <span class="tooltiptext" id="tooltiptext">50cm</span>
  <input type="range" min="0" max="100" value="50" class="slider" id="myRange" onchange="rangeValFunc(this.value);">
  </div>
</div>