找回密码
 注册

使用css设置chrome audio video 样式

php 发表于 2019/3/20 22:37 | 显示全部楼层 |阅读模式
chrome audio video默认会有圆角会有背景,看起来非常别扭,使用audio video的border和border-radius无法重置audio和video的边框和圆角样式。
吴先成通过反复探索发现想要重置chrome中的audio video为方形为圆角样式,可以通过将audio和audio::-webkit-media-controls-panel的背景设置为相同颜色实现。
示例代码
  1. <style>
  2.         audio{
  3.                 background: #ff8c00;
  4.         }
  5.         audio::-webkit-media-controls-panel{
  6.                 background: #ff8c00;
  7.         }
  8. </style>
复制代码
还可以通过以下伪元素实现更精细的audio video控制区域样式设置
  1. audio::-webkit-media-controls-panel
  2. audio::-webkit-media-controls-mute-button
  3. audio::-webkit-media-controls-play-button
  4. audio::-webkit-media-controls-timeline-container
  5. audio::-webkit-media-controls-current-time-display
  6. audio::-webkit-media-controls-time-remaining-display
  7. audio::-webkit-media-controls-timeline
  8. audio::-webkit-media-controls-volume-slider-container
  9. audio::-webkit-media-controls-volume-slider
  10. audio::-webkit-media-controls-seek-back-button
  11. audio::-webkit-media-controls-seek-forward-button
  12. audio::-webkit-media-controls-fullscreen-button
  13. audio::-webkit-media-controls-rewind-button
  14. audio::-webkit-media-controls-return-to-realtime-button
  15. audio::-webkit-media-controls-toggle-closed-captions-button
复制代码
伪元素名称对应相应的控制区域组件的样式设置

手机版|轻松E站

轻松E站

快速回复 返回顶部 返回列表