Context: In my quest to enhance the appearance of the audio element in Chrome, specifically version 89 on MacOS, I encountered two perplexing issues that I am seeking a deeper understanding of. By utilizing pseudo selectors, I was able to successfully style elements within the audio player by inspecting the shadow DOM through the browser's developer tools. Two rules that were effective are as follows:
::-webkit-media-controls-timeline {background-color: pink;}audio::-webkit-media-controls-time-remaining-display {background-color: lightgrey;} Inquiry: Despite these successes, there are two anomalies that have left me puzzled.
Challenge 1: My attempt to style the first letter within the time-remaining-display div has proven unsuccessful with the following rule:
audio::-webkit-media-controls-time-remaining-display:first-letter {color: white;}I find it odd that this rule doesn't take effect when similar styling on a regular div works as expected. What is preventing me from targeting and styling the first letter in this case? (The goal here is to eliminate an irritating leading / symbol in the time display).
Challenge 2:
Another puzzling issue arises when trying to style an element with a different pseudo attribute located elsewhere in the shadow DOM using the following rule:
::-internal-track-segment-highlight-before {background-color: blue;}It's unclear why this rule fails to apply compared to the previous successful color styling. (The aim here is to improve contrast between two sections of the track segment.)
Additionally, I made a slight improvement in contrast by applying:
audio::-webkit-media-controls-timeline {-webkit-filter: brightness(2.5);}However, the underlying question remains: Why did one method work while the other did not?