admin 管理员组

文章数量: 1086019


2024年5月25日发(作者：scaleup插件)

input range 轨道滑过区域的样式

input range 轨道滑过区域的样式可以通过以下方式进行设置：

```css

input(type=range)::-webkit-slider-runnable-track {

width: 100%;

height: 8.4px;

cursor: pointer;

box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);

background: rgba(255, 255, 255, 0.8);

border-radius: 3.3px;

border: 0.2px solid rgba(1, 1, 1, 0);

}

input(type=range)::-webkit-slider-thumb {

-webkit-appearance: none;

height: 15px;

width: 15px;

box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);

border-radius: 50px;

background: #ffc600;

cursor: pointer;

margin-top: -3.5px;

box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);

}

```

上述代码中，`input(type=range)::-webkit-slider-runnable-track`部分用于设置轨

道滑过区域的样式，包括宽度、高度、背景颜色、边框和圆角半径等。

`input(type=range)::-webkit-slider-thumb`部分用于设置滑块的样式，包括大小、形状、

颜色和边框等。你可以根据自己的需求修改这些样式。

需要注意的是，上述代码是基于webkit 内核的浏览器编写的，对于其他内核的浏览器

可能需要使用不同的代码来实现相同的效果。


本文标签： 样式 需要 设置 包括

版权声明：本文标题：input range 轨道滑过区域的样式 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1716593670a693765.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。