Skip to content

Instantly share code, notes, and snippets.

@Realetive
Created March 7, 2015 23:56
Show Gist options
  • Save Realetive/43c970b72a70badbd2a3 to your computer and use it in GitHub Desktop.
Save Realetive/43c970b72a70badbd2a3 to your computer and use it in GitHub Desktop.
Styles for HTML5 audio
audio {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}
audio {
width: 100%;
}
audio::-webkit-media-controls-enclosure {
max-width: none
}
audio::-webkit-media-controls-panel {
background-color: transparent
}
audio::-webkit-media-controls-play-button {
-webkit-appearance: none;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAQCAMAAAD3Y3VMAAAAGFBMVEXqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWSqmnHoAAAAB3RSTlMAAQOQkaipUd1d4wAAADBJREFUeAFjYGBgZGSAAUZmZkY4k50dxmFiY6eIw8QKZLMwkspkYGSBMKEcGBPZzQCV0AGPVdxMxgAAAABJRU5ErkJggg==) 50% 50% no-repeat;
}
audio::-webkit-media-controls-mute-button {
-webkit-appearance: none;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAMAAAAs2N9uAAAAYFBMVEXqgWT////qgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWSj/dGmAAAAH3RSTlMAAAEDFSAqQEZIT3+MjY+QkZmjqKmqt8bH4OLw8/3+CsnX2AAAAHtJREFUeNpl0NsOwjAMA1C7Y2zAoAXKHeb//8tFKk0f5scjJXKCf0IAWFIlxmA09QCrSDGQuvSgi3JHPjSBLrphwP79HWlCGszKuA846WiUVJJxOGOnJxHltH1how+R1lRsboO+Xr6+lEgmv1bC7epV3ZIfVC21s9fPWQCqbQznzfJieAAAAABJRU5ErkJggg==) 50% 50% no-repeat;
}
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
color: #1e140d
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment