如何自定义videojs圆形scrubber进度滑块按钮的样式

解决方案 #

VideoJS 默认的圆形 scrubber 滑块是通过伪元素的字体图标实现的，你之前设置background-color只会给伪元素加背景色块，滑块本身的颜色由color属性控制，直接修改对应属性即可：

.video-js .vjs-play-progress::before {
    /* 只需要替换为你想要的颜色值即可修改滑块本身颜色 */
    color: #eb882a; 
    font-size: 0.9em;
    position: absolute;
    right: -0.5em;
    top: -0.3333333333em;
    z-index: 1;
    /* 删掉你之前加的background-color属性，否则还是会显示橙色方块 */
}

如果出现优先级不够样式不生效的情况，可以提升选择器权重或者加!important：

/* 更高权重的写法 */
.video-js .vjs-progress-control .vjs-play-progress::before {
    color: #eb882a !important;
}

如果你不想用内置的字体图标，想要完全自定义滑块样式，也可以清空默认的content属性自己绘制：

.video-js .vjs-play-progress::before {
    content: "";
    /* 自定义圆形滑块尺寸、颜色 */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #eb882a;
    /* 位置按需调整 */
    right: -6px;
    top: -3px;
    z-index: 1;
}

内容的提问来源于stack exchange，提问作者UpNorth