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

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

      • 描述
      • 实现
      • 结果

描述

修改video标签的原生样式

实现

在控制台中打开设置，勾选显示用户代理 shadow DOM，就可以审查video标签的内部样式了
在这里插入图片描述在这里插入图片描述
箭头处标出来的就是shodow DOM的内容，这些内容正常不可见的，只有勾选了才会显示

  1. 我们知道了结构之后，就可以通过css来设置样式了
  2. 将时间修改为红色样式
    在这里插入图片描述
    拿到pseudo的值设置样式
video::-webkit-media-controls-current-time-display {
      color: red;
   }

结果

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/418931.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

vscode——远端配置及一些问题解决

vscode——远端配置及一些问题解决

vscode——远端配置 安装Remote -SSH插件配置config本地变化一些问题缺失核心关闭vscode自动更新 尝试写入管道不存在hostname -I 查出来的ip连不上 我们之前大概了解了vscode的本地设置，我们之前提过，vscode是一款编辑器，在文本编辑方面有着…
阅读更多...
UI 自动化测试实战（二）| 测试数据的数据驱动

UI 自动化测试实战（二）| 测试数据的数据驱动

数据驱动就是通过数据的改变驱动自动化测试的执行，最终引起测试结果的改变。简单来说，就是参数化在自动化测试中的应用。 测试过程中使用数据驱动的优势主要体现在以下几点： 1.提高代码复用率，相同的测试逻辑只需编写一条测试用例…
阅读更多...
【系统设计】高性能秒杀系统如何设计？

【系统设计】高性能秒杀系统如何设计？

欢迎关注公众号（通过文章导读关注：【11来了】），及时收到 AI 前沿项目工具及新技术的推送！ 在我后台回复 「资料」 可领取编程高频电子书！ 在我后台回复「面试」可领取硬核面试笔记！ 文章导读地址…
阅读更多...
github-actions

github-actions

文章目录 workflow触发器action市场contextsecrets 默认环境变量 workflow name: {{workflow name}} run-name: {{workflow runs name}}on: {{触发器}} #[push]env:{{定义workflow变量}}: valuejobs:{{job name}}:runs-on: {{运行机器}} #ubuntu-latestenv:{{定义job变量}}: v…
阅读更多...
01-Vue2 介绍与指令的使用

01-Vue2 介绍与指令的使用

1. Vue核心 1.1. Vue简介 1.1.1. 官网 中文官网Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)https://cn.vuejs.org/ 英文官网Vue.js - The Progressive JavaScript Framework | Vue.js (vuejs.org)https://vuejs.org/ 1.1.2. 介绍与描述 VUE是构建于用户界面的渐进…
阅读更多...
HTTPS的加密过程

HTTPS的加密过程

文章目录 前言一、为什么需要加密？二、只用对称加密可以吗？三、只使用非对称加密四、双方都使用非对称加密五、使用非对称加密对称加密六、引入证书1.如何放防止数字证书被篡改？2.中间人有可能篡改该证书吗？3.中间人有可能掉包该证…
阅读更多...
第六课：NIO简介

第六课：NIO简介

一、传统BIO的缺点 BIO属于同步阻塞行IO,在服务器的实现模型为，每一个连接都要对应一个线程。当客户端有连接请求的时候，服务器端需要启动一个新的线程与之对应处理，这个模型有很多缺陷。当客户端不做出进一步IO请求的时候，服务器…
阅读更多...
《最新出炉》系列初窥篇-Python+Playwright自动化测试-37-如何截图-上篇

《最新出炉》系列初窥篇-Python+Playwright自动化测试-37-如何截图-上篇

1.简介 这个系列的文章也讲解和分享了差不多三分之一吧，突然有小伙伴或者童鞋们问道playwright有没有截图的方法。答案当然是：肯定有的。宏哥回过头来看看确实这个非常基础的知识点还没有讲解和分享。那么在这个契机下就把它插队分享和讲解一下。Playwr…
阅读更多...
CCF-A类 IEEE VIS‘24 3月31日截稿！探索可视化技术的无限可能！

CCF-A类 IEEE VIS‘24 3月31日截稿！探索可视化技术的无限可能！

会议之眼 快讯 IEEE VIS (IEEE Visualization Conference )即可视化大会将于 2024 年 10月13日 -18日在美国佛罗里达州皮特海滩的信风岛大海滩度假举行！圣彼得海滩，以其迷人的日落和和煦的微风，作为激发创造力和促进可视化社区内合作的完美背…
阅读更多...
图片卷子怎么转换成word文档？3种方法轻松转换

图片卷子怎么转换成word文档？3种方法轻松转换

图片卷子怎么转换成word文档？在日常学习中，将图片卷子转换成Word文档可以极大地方便学生们的学习和复习。首先，转换成Word文档后，学生们可以轻松地编辑、复制和粘贴其中的内容，从而快速整理学习笔记或制作复习资料。其…
阅读更多...
一键生成任意前端项目

一键生成任意前端项目

开始 方式一：根据数据库结构一键生成 方式二：根据（.sql, .java, .txt）描述文件单页面生成 总结 话不多说，作为后端开发人员，不爱写前端代码，但又不得不需要一个系统的管理端来配置些数据等等…
阅读更多...
Unity3d Mesh篇（三）— 创建立方体

Unity3d Mesh篇（三）— 创建立方体

文章目录 前言一、Mesh组成二、使用步骤GetVertices方法GetTriangles方法OnDrawGizmos方法 三、效果四、总结 前言 在 Unity 中，创建立方体是学习和理解网格（Mesh）基础知识的重要一步。本篇教程将介绍如何使用 C# 脚本在 Unity 中创建一个简…
阅读更多...
PSO-CNN-LSTM多输入时序预测|粒子群算法优化的卷积-长短期神经网络时序预测(Matlab)——附代码+数据

PSO-CNN-LSTM多输入时序预测|粒子群算法优化的卷积-长短期神经网络时序预测(Matlab)——附代码+数据

目录 一、程序及算法内容介绍： 基本内容： 亮点与优势： 二、实际运行效果： 三、算法介绍： 四、完整程序数据分享下载： 一、程序及算法内容介绍： 基本内容： 本代码基于Matlab平台…
阅读更多...
怎样消除视频上的字幕和文字？3个方法值得推荐

怎样消除视频上的字幕和文字？3个方法值得推荐

怎样消除视频上的字幕和文字？消除视频上的字幕和文字不仅是一个常见的需求，更是一个对视频内容质量提升的关键步骤。特别是在处理从网络下载的带有水印或标识的视频时，这些额外的文字和信息往往会干扰观众的观看体验，甚至可能影响…
阅读更多...
Excel中使用ROW函数自动更新行号或编号

Excel中使用ROW函数自动更新行号或编号

操作步骤： 1、在编号“1”的单元格输入公式“ROW()-1”； 2、在上一步填好公式的单元格基础上下拉填充，即可批量得到编号，如果删掉其中的一行或几行，编号会自动进行更新。
阅读更多...
vscode更新至1.86版本后，ssh远程连接服务器出现异常

vscode更新至1.86版本后，ssh远程连接服务器出现异常

问题 you are connected to an OS version that is unsupported by Visual Studio Code 你已连接到不受Visual Studio Code支持的OS 版本 原因是vscode更新到1.86版本后要求远程连接服务器的内核版本和库版本需要符合下面条件。 解决方法 因此有两种方法解决 1.更新服务器…
阅读更多...
练习 3 Web [ACTF2020 新生赛]Upload

练习 3 Web [ACTF2020 新生赛]Upload

[ACTF2020 新生赛]Upload1 中间有上传文件的地方，试一下一句话木马 txt 不让传txt 另存为tlyjpg，木马文件上传成功 给出了存放目录： Upload Success! Look here~ ./uplo4d/06a9d80f64fded1e542a95e6d530c70a.jpg 下一步尝试改木马文件后缀…
阅读更多...
Java-nio

Java-nio

一、NIO三大组件 NIO的三大组件分别是Channel，Buffer与Selector Java NIO系统的核心在于：通道(Channel)和缓冲区(Buffer)。通道表示打开到 IO 设备(例如：文件、套接字)的连接。若需要使用 NIO 系统，需要获取用于连接 IO 设备的通…
阅读更多...
ChatGPT 是什么?如何订阅ChatGPTPLUS？

ChatGPT 是什么?如何订阅ChatGPTPLUS？

ChatGPT 是什么？ ChatGPT 是一种大型语言模型（LLM），由OpenAI开发。 它使用深度学习技术来模拟人类的语言生成和理解能力，可以用于自然语言处理、对话系统等多种应用。 ChatGPT基于自然语言处理技术和神经网络模型&a…
阅读更多...
无字母数字rce总结（自增、取反、异或、或、临时文件上传）

无字母数字rce总结（自增、取反、异或、或、临时文件上传）

目录 自增 取反 异或 或 临时文件上传 自增 自 PHP 8.3.0 起，此功能已软弃用 在 PHP 中，可以递增非数字字符串。该字符串必须是字母数字 ASCII 字符串。当到达字母 Z 且递增到下个字母时，将进位到左侧值。例如，$a Z; $a;将…
阅读更多...
最新文章

Copyright @ 2022~2023