如何通过css修改video标签的原生样式

如何通过css修改video标签的原生样式

通过css修改video标签的原生样式

描述

修改video标签的原生样式

实现

在控制台中打开设置,勾选显示用户代理 shadow DOM,就可以审查video标签的内部样式了

箭头处标出来的就是shodow DOM的内容,这些内容正常不可见的,只有勾选了才会显示

我们知道了结构之后,就可以通过css来设置样式了将时间修改为红色样式

拿到pseudo的值设置样式

video::-webkit-media-controls-current-time-display { color: red; }

结果

如何通过css修改video标签的原生样式