在 css 中更改输入类型范围栏的颜色

Question

我在我的代码中使用输入类型范围栏，并且想更改颜色。我不想改变它的任何其他内容，我只想将颜色从蓝色更改为其他颜色。

我知道我可以像这样通过 css 访问它：

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

但这改变了输入范围，我只想改变颜色。

Answer 1

据我所知，你不能只改变一个部分的颜色而让其他部分保持原样。此外，在不同的浏览器中，滑块的部分是不同的（它们呈现不同，并且它们的内部结构不同）。查看此工具：https://toughengineer.github.io/demo/slider-styler
它允许相对轻松地设计

<input>

范围滑块并为您生成跨浏览器CSS。

这是一篇关于

<input>

范围元素如何工作以及如何在不同浏览器中设置其各个部分样式的好文章：
https://css-tricks.com/sliding-nightmare-understanding-range-input/

Answer 2

// .chrome styling Vanilla JS

document.getElementById("myinput").oninput = function() {
  var value = (this.value-this.min)/(this.max-this.min)*100
  this.style.background = 'linear-gradient(to right, #82CFD0 0%, #82CFD0 ' + value + '%, #fff ' + value + '%, white 100%)'
};

#myinput {
  background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
  border: solid 1px #82CFD0;
  border-radius: 8px;
  height: 7px;
  width: 356px;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}

<div class="chrome">
  <input id="myinput" min="0" max="60" type="range" value="30" />
</div>

Answer 3

只需将 accent-color css 属性用于输入字段，并在此处为字段赋予任何颜色我创建了 3 个输入范围字段，颜色为红色、绿色和蓝色，但您可以使用它创建任何颜色范围输入。希望这个回答对你有帮助

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.sliderRed{
   accent-color:red;
   }
   
 .sliderGreen{
   accent-color: green;
   }
   
 .sliderBlue{
   accent-color:blue;
   }
   </style>
</head>
<body>
    <div className="m-auto my-4 flex justify-between ">
  <input type="range" class="sliderRed" id="myRange"/>

  <input type="range" class="sliderGreen" id="myRange"/>

  <input type="range" class="sliderBlue" id="myRange"/>
  </div>
</body>
</html>

在 css 中更改输入类型范围栏的颜色

问题描述投票：0回答：3

3个回答

最新问题

在 css 中更改输入类型范围栏的颜色

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3