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

  发布时间:2024-08-27 16:38:06   作者:zhanle_huang   我要评论
这篇文章主要介绍了如何通过css修改video标签的原生样式,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

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

描述

修改video标签的原生样式

实现

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

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

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

拿到pseudo的值设置样式

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

结果

到此这篇关于如何通过css修改video标签的原生样式的文章就介绍到这了,更多相关css修改video标签内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

  • CSS list-style修改列表属性控制li标签样式

    list_style属性用于修改列表的属性,list-style-type用于设置列表项类型,list-style-position用于设这列表项位置,list-style-image用于设置使用图像替换列表项标记
    2014-07-29

最新评论