html - 更改范围滑块的颜色
问题描述
我是网络编程的新手,所以这个问题对你们大多数人来说看起来很容易。
我有 3 个范围滑块,我想为每个滑块设置不同的颜色(红色、绿色和蓝色),那么设置颜色的最佳方法是什么。通过 id 或任何其他方式在加载时使用 body?
演示在这里https://codepen.io/fast7027/pen/zXLOem
<div class="btn-row">
<input type="range" min="0" max="100" value="65" id="rangeR">
</div>
<div class="btn-row">
<input type="range" min="0" max="100" value="65" id="rangeG">
</div>
<div class="btn-row">
<input type="range" min="0" max="100" value="65" id="rangeB">
</div>
解决方案
我会使用带有 id 和 ::-webkit-slider-thumb 这个属性的 css。
在属性中,有盒子阴影。
试着放在下面。
盒子阴影:-100vw 0 0 100vw #007aff;
#007aff 是蓝色的,但如果你将它与你的 id 一起使用,那么你可以将滑块更改为你想要的颜色。
你的CSS中的例子,
#rangeR::-webkit-slider-thumb {
box-shadow: -100vw 0 0 100vw Red;
}
#rangeG::-webkit-slider-thumb {
box-shadow: -100vw 0 0 100vw Green;
}
#rangeB::-webkit-slider-thumb {
box-shadow: -100vw 0 0 100vw Blue;
}
::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px; /* 1 */
height: 20px;
background: #fff;
border: 2px solid #999; /* 1 */
}
推荐阅读
- vb.net - 短升序文本框数字行数组顺序
- datatable - 带有 Shopify Polaris DataTable 的可点击行
- python - 如何从 Python 中的条件输出中分割第一列?
- python - python opencv findContours() 错误 cpp 197
- java - 输入第一行文件时Java中的NumberFomatException错误
- javascript - Angular - 如何在类中处理 Observable
- vba - 如何让 VBA 脚本适用于变量字段?
- visual-studio - MFC 选项卡控件中的 VTK 窗口
- r - 如何使用正则表达式和 kwic 来获取所有匹配项?
- python - Python - 根据列值在循环中运行 SQL