如何通过css修改video标签的原生样式
<h2>通过css修改video标签的原生样式</h2><h3>描述</h3>
<p>修改video标签的原生样式</p>
<h3>实现</h3>
<p>在控制台中打开设置，勾选显示用户代理 shadow DOM，就可以审查video标签的内部样式了</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202408/2024082716322718.png" /></p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202408/2024082716322719.png" /></p>
<p>箭头处标出来的就是shodow DOM的内容，这些内容正常不可见的，只有勾选了才会显示</p>
<ul><li>我们知道了结构之后，就可以通过css来设置样式了</li><li>将时间修改为红色样式</li></ul>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202408/2024082716322720.png" /></p>
<p>拿到pseudo的值设置样式</p>
<div class="jb51code"><pre class="brush:css;">video::-webkit-media-controls-current-time-display {
color: red;
}</pre></div>
<p>结果</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202408/2024082716322721.png" /></p>
頁:
[1]