Css 样式滚动条滑块

如何设置在底部水平显示的滑块滚动条的样式？这是一个大问题，我没有解决办法。我错过了什么？我必须在这里多放些文字为什么

滑块{
宽度：100%；
高度：自动；
显示器：flex；
溢出-x：自动；
-webkit溢出滚动：触摸；
滚动行为：平滑；
&：-webkit滚动条{
颜色：红色；
背景颜色：绿色；
}
&：-滚动条按钮{
颜色：蓝色；
背景色：黄褐色；
}
}
.img{
弹性收缩：0；
最大宽度：100%；
身高：100%；
}

请参见

/*宽度*/
：-webkit滚动条{
宽度：20px；
}
/*跟踪*/
：-webkit滚动条轨迹{
方框阴影：嵌入0 5px蓝色；
边界半径：10px；
}
/*处理*/
：-webkit滚动条拇指{
背景：黄色；
边界半径：10px；
}
/*悬停手柄*/
：-webkit滚动条拇指：悬停{
背景：绿色；
}
.滑块{
宽度：100%；
高度：自动；
显示器：flex；
溢出-x：自动；
-webkit溢出滚动：触摸；
滚动行为：平滑；
}
.img{
弹性收缩：0；
最大宽度：100%；
身高：100%；
}

每个人都讨厌样式化的滚动条。重新考虑一下，我认为这是私人的。