如何设置输入类型=“范围"的样式 [英] How to style input type="range"

问题描述

我在为这个元素设计样式时有点挣扎.我以前从未这样做过，我无法真正找到解决问题的方法.

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

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

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

我的目标是这个

因为我以前从未设计过这个元素的样式，所以所有这些 css 都来自我在 Google 上找到的多篇文章.有没有类似 background:active 和 background:unactive 之类的东西?

谢谢.

.container{背景颜色:红色；宽度:30%；填充:1em；文字对齐:居中；}输入[类型=范围"]{宽度:100%；}输入[类型=范围]{-webkit 外观:无；}输入[类型=范围]::-webkit-slider-runnable-track {高度:0.35em；背景:白色；边界:无；边框半径:3px；}输入[类型=范围]::-webkit-slider-thumb {-webkit 外观:无；边界:无；高度:1.1em；宽度:1.1em；边界半径:50%；背景:白色；边距顶部:-4px；}输入[类型=范围]:焦点{大纲:无；}

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

解决方案

请试试这个..并在 css 中给出 transitions 以增加吸引力

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

.container {背景:#eb6c5b;填充:20px；}输入[类型=范围"]{-webkit 外观:无；宽度:100%；高度:8px；大纲:无！重要；外观:无；边界:无；边界半径:30px；}输入[type="range"]::-moz-focus-outer {边框:0；}输入[类型=范围"]:悬停{大纲:无；}/* 铬合金 */输入[type="range"]::-webkit-slider-thumb {-webkit 外观:无；外观:无；宽度:9px；高度:9px；背景:#4CAF50；光标:指针；边框半径:30px；大纲:无；}/*莫兹*/输入[type="range"]::-moz-range-thumb {宽度:18px；高度:18px；背景:#f1f9f4；光标:指针；边界半径:50%；边界:无；大纲:无；}输入[type="range"]::-moz-range-progress {背景色:#fff;高度:100%；边界半径:30px；边界:无；}输入[type="range"]::-moz-range-track {背景颜色:#ccc；边界半径:30px；边界:无；高度:100%；}/* IE*/输入[type="range"]::-ms-fill-lower {背景色:#fff;高度:100%；边界半径:30px；边界:无；}输入[type="range"]::-ms-fill-upper {背景颜色:#ccc；边界半径:30px；边界:无；高度:100%；}/* 工具提示样式 */.工具提示{位置:相对；填充:30px 0;}.tooltip .tooltiptext {可见性:隐藏；宽度:100px；背景颜色:#f38080；颜色:#fff;文本对齐:居中；填充:5px 0;边框半径:6px；位置:绝对；z-索引:1；顶部:-5px；左:计算(50% - 50px)；}.tooltip:悬停 .tooltiptext {可见性:可见；}.tooltip .tooltiptext::after {内容: "";位置:绝对；顶部:100%；左:50%；左边距:-5px；边框宽度:5px；边框样式:实心；边框颜色:#f38080 透明透明透明；}

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

I'm kinda struggling at styling this element. I've never done it before and I can't really find solution to my problem.

I just want to add border-radius to edges, add some box-shadow to that dot ,which is dragable and main reason why I'm asking is ,how to add that lower opacity to side which is not selected yet.

I don't know if it has to be done by Javascript ,or I can simply do it with css but my problem is :

This is how my range looks now

My goal is this

Since I've never styled this element before ,all of this css is from multiple articles ,which I've found on Google. Is there anything for this like background:active and background:unactive ?

Thanks.

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

解决方案

please try this.. And give transitions in css for more attractive

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>

这篇关于如何设置输入类型=“范围"的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！