css - 如何去掉 Safari 中 html5 音频标签中的 "loaded"文本

Question

我需要一个只有播放/暂停按钮的纯 html5 音频标签。

感谢这些链接: https://gist.github.com/afabbro/3759334 http://trac.webkit.org/browser/trunk/Source/WebCore/css/mediaControls.css

我已经能够弄清楚构成音频控件的大部分(令人惊讶的是未记录的)-webkit-* 伪元素，并在 CSS 中为它们分配一个“display:none”规则，这样它们就不会出现.我已经能够让音量控制、静音控制、搜索栏等全部消失，但是 MacOS 中的 Safari 仍然在播放按钮旁边显示一个文本，我说“加载”(或类似的东西:它用意大利语表示“Carico”)。

是否可以阻止显示该文本？我猜它属于其他一些伪元素，但我无法找到一种方法来确定是哪一个(元素检查器没有帮助)。

我尝试将“字体大小:0”应用于包含的伪元素，但它不起作用。

我的样式表:

audio {
    width: 40px;
    height: 40px;
    font-size: 0;
}
audio * {
    font-size: 0;
}

/* https://gist.github.com/afabbro/3759334 */
audio::-webkit-media-controls-enclosure {
    max-width: none; /*or inherit*/
    padding: 0;
    margin: 0;
    font-size: 0 !important;
}
audio::-webkit-media-controls-enclosure * {
    font-size: 0 !important;
}
audio::-webkit-media-controls-panel {
    padding: 0;
    margin: 0;
    width: 40px;
    height: 40px;
    /*background: black;*/
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    font-size: 0 !important;
}

audio::-webkit-media-controls-panel * {
    font-size: 0 !important;
}

audio::-webkit-media-controls-mute-button, audio::-webkit-media-controls-timeline-container, audio::-webkit-media-controls-current-time-display, audio::-webkit-media-controls-time-remaining-display, audio::-webkit-media-controls-timeline, audio::-webkit-media-controls-volume-slider-container, audio::-webkit-media-controls-volume-slider, audio::-webkit-media-controls-seek-back-button, audio::-webkit-media-controls-seek-forward-button, audio::-webkit-media-controls-fullscreen-button, audio::-webkit-media-controls-rewind-button, audio::-webkit-media-controls-return-to-realtime-button, audio::-webkit-media-controls-toggle-closed-captions-button, audio::-webkit-media-controls-closed-captions-container, audio::-webkit-media-controls-closed-captions-track-list {
    display: none;
}

audio::-webkit-media-controls-play-button {
    margin: auto auto auto auto;
    padding: 0;
    /*width: 30px;
    height: 30px;*/
    cursor: pointer;
}

Answer 1

通过浏览 WebKit 的源代码(或者看起来像是 https://github.com/WebKit/webkit/tree/master/Source/WebCore 的东西)我发现了我需要隐藏的伪元素:

这就是最终成功的原因:

audio::-webkit-media-controls-status-display {
    display: none;
}