如何设置或隐藏HTML audio标签的播放速率菜单图标样式？

情况1：自定义网页内的HTML5视频控件 #

如果是针对自己开发的网页中的视频播放速率按钮，直接用WebKit专属CSS伪元素定位即可：

• 隐藏按钮：

video::-webkit-media-controls-playback-rate-button {
    display: none !important;
}

• 自定义样式：

video::-webkit-media-controls-playback-rate-button {
    /* 示例样式：修改文字颜色和大小 */
    color: #2ecc71;
    font-size: 13px;
    padding: 2px 4px;
}

情况2：修改Chrome全局媒体控件（地址栏下方的控件） #

你提到的mediaControls.css属于旧版Blink的核心样式文件，现在Chrome的全局媒体控件由浏览器WebUI/Views系统管理，对应的样式不在这个文件里。要修改这类控件，推荐用Chrome扩展注入CSS：

1. 创建扩展文件结构：
   • manifest.json（配置扩展）：

   {
       "manifest_version": 3,
       "name": "自定义媒体控件",
       "version": "1.0",
       "content_scripts": [
           {
               "matches": ["<all_urls>"],
               "css": ["styles.css"]
           }
       ]
   }
   

   • styles.css（样式文件）：

   /* 隐藏全局播放速率按钮 */
   #media-controls-playback-rate-button {
       display: none !important;
   }
   
   /* 或者自定义样式 */
   #media-controls-playback-rate-button {
       background: #f1f3f4;
       border-radius: 4px;
       margin: 0 2px;
   }
   

2. 打开Chrome扩展页面（chrome://extensions/），开启"开发者模式"，点击"加载已解压的扩展程序"，选择上述文件所在的文件夹即可生效。

内容的提问来源于stack exchange，提问作者André Fiedler