提问人：Grasper 提问时间：11/18/2023 最后编辑：Grasper 更新时间：11/18/2023 访问量：33
如何将默认的Firefox样式应用于输入类型范围？
How to apply the default Firefox style for input type range?
问：
当我在不同的浏览器（如 Edge 和 Chrome）中加载输入类型范围时，我会得到不同的输入外观和感觉。
有没有办法将 Firefox 的样式应用于 Chrome 和 Edge？
<input type="range" id="volume" name="volume" min="0" max="11" />
答：
5赞
John
11/18/2023
#1
要在 Chrome 和 Edge 中应用 Firefox 的样式，您可以使用 CSS 来模仿或覆盖默认样式。不幸的是，在其他浏览器中复制 Firefox 范围输入的确切外观可能并不简单，特别是如果您想要相同的外观。
[HTML全文]
<input type="range" id="volume" name="volume" min="0" max="11" class="firefox-style" />
CSS的
/* Apply Firefox-like styling */
.firefox-style {
/* Reset default styles */
-webkit-appearance: none;
appearance: none;
/* Firefox-like styles */
height: 6px;
border-radius: 5px;
background: #0075FF;
outline: none;
/* Adjust thumb style */
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #676774;
cursor: pointer;
}
评论
0赞
Grasper
11/18/2023
我想，那是不可能的。
评论