Custom CSS for <audio> tag? - css

I'm building a music player web application which implements the HTML5 audio tag, however would like it to look consistent across browsers - is it possible to define my own custom CSS? And how?

There is not currently any way to style HTML5 <audio> players using CSS. Instead, you can leave off the control attribute, and implement your own controls using Javascript. If you don't want to implement them all on your own, I'd recommend using an existing themeable HTML5 audio player, such as jPlayer.

I discovered quite by accident (I was working with images at the time) that the box-shadow, border-radius and transitions work quite well with the bog-standard audio tag player. I have this working in Chrome, FF and Opera.
audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}
with:-
audio
{
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #006773;
-webkit-box-shadow: 2px 2px 4px 0px #006773;
box-shadow: 2px 2px 4px 0px #006773;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
}
I grant you it only "tarts it up a bit", but it makes them a sight more exciting than what's already there, and without doing MAJOR fannying about in JS.
NOT available in IE, unfortunately (not yet supporting the transition bit), but it seems to degrade nicely.

You can style audio element using some obscure css selectors. Here's a few of them.
audio::-webkit-media-controls-enclosure {
background-color: #c6c6ec;
}
audio::-webkit-media-controls-timeline {}
audio::-webkit-media-controls-volume-control-container {}
audio::-webkit-media-controls-volume-control-container.closed {}
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 {}
Haven't found an exhaustive list of these, but here's the closest thing.

Besides the box-shadow, transform and border options mentioned in other answers, WebKit browsers currently also obey -webkit-text-fill-color to set the colour of the "time elapsed" numbers, but since there is no way to set their background (which might vary with platform, e.g. inverted high-contrast modes on some operating systems), you would be advised to set -webkit-text-fill-color to the value "initial" if you've used it elsewhere and the audio element is inheriting this, otherwise some users might find those numbers unreadable.

There are CSS options for the audio tag.
Like: html 5 audio tag width
But if you play around with it you'll see results can be unexpected - as of August 2012.

Related

Can't remove box shadow on visited link - applied twice

Not sure if this is just related to :visited links or a general styling thing with box-shadow, but I can't get it to override.
https://jsfiddle.net/pt39v1yy/1/
I was initially trying to change the color of the box-shadow, but then realized it was not overriding the thing so I tried to remove as well and still nothing. I tried adding !important, unset, initial, etc but inspecting always shows the original box-shadow is not crossed out, it's like it can't be overridden.
a:not(.btn) {
text-decoration: none;
border-bottom: 3px solid #b4e7f8;
box-shadow: inset 0 -4px 0 #b4e7f8;
-webkit-transition: background .35s cubic-bezier(.33,.66,.66,1);
transition: background .35s cubic-bezier(.33,.66,.66,1);
color: inherit;
}
a:not(.btn):hover{
background: #b4e7f8;
text-decoration: none;
}
a:not(.btn):visited {
border-bottom: 3px solid #beb4f8;
background: #beb4f8;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: inherit;
}
Helloo,
According to MDN: You can only apply certain properties to the :visited selector in CSS, and box-shadow is not one of them.
Note: For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke. Note also that the alpha component will be ignored: the alpha component of the not-visited rule is used instead (except when the opacity is 0, in that case the whole color is ignored, and the one of the not-visited rule is used).
For more information on the current limitations take a look at: Privacy and the :visited selector.
Maybe you could do something like this if you really want to have the box-shadow: https://jsfiddle.net/pt39v1yy/2/
I hope this helps!

IE11 making background image text blurry

I'm working on a website, where I use image sprites on a button. In every other browser I've tried, except for IE11, the text on my sprite is crisp as it should be, but in IE11, the text gets blurry (See images).
The blurry one being IE11 ofc. The width of the sprite is 189px and the height is 378px. I use the following CSS:
button {
width:189px;
height:189px;
background-image:url('../images/kontakt-os.png');
background-position: top;
cursor:pointer;
border-radius: 100px;
}
button:hover {
background-position: bottom;
-webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
-moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0);
}
So is this just an IE flaw, or can I actually do something about it ?
Thanks in advance.
EDIT:
I might just add, that if I just insert the same image as <img src="lala.png"> the text is NOT blurry. It only applies to backgrounds :/
It is a normal IE bug.
http://www.infoworld.com/t/microsoft-windows/blurry-fonts-bug-kb-2670838-persists-ie11-and-windows-7-231035
i Haven't found any solutions to this subject yet.
I'd recommend not having that button as a sprite at all for the following reasons-
It is not accessible or SEO efficient - neither screen readers nor search engine crawlers can read the text in the image.
It requires an additional HTTP request to download the sprite image, which will make your site load more slowly - especially on mobile devices
Unless you make the button much larger than it needs to be rendered on the page and scale down, then you will have issues of blurring when scaling up on high density devices, such as newer full size iPads and premium Android tablets, recent Macs and premium windows laptops. Clearly making the image larger than it needs to be means it is larger and exacerbates the speed penalty from point two.
If you want to change the colour scheme at any point in the future, you only need to change your CSS color properties, not re-generate new images.
It is trivial to make this button appear like your screenshot in CSS.
If you use markup something like this-
<button class="text-button" type="button">Send Besked</button>
And CSS like this-
.text-button {
background: #b32e01;
border: none;
border-radius: 8px 8px 8px 0;
color: #ffffff;
cursor: pointer;
height: 3em;
outline: none;
padding: 1em 0;
text-transform: uppercase;
width: 12.5em;
}
.text-button:hover {
-webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
-moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0);
}
It ends up looking like this (see JSFiddle for source)-
Although only a rough mockup (you may want to change proportions, add a gradient or change the background on hover - I can't see the original sprite to know the transformations you make in the hover state sprite) it already looks much like the original, and with all the advantages above - in particular that it should solve the text problem you originally posted.
I've just come across this issue.
I just placed the background image inside a span to keep the border radius and background image on different elements, seems to have done the trick.
.item {
border-radius: 8px 8px 8px 0;
}
.item span {
background-image:url('imagepath.png');
}
I found success in eliminating the blur effect by using :not(:hover). It seems to force the background-image into not blurring.
Try adding
button:not(:hover) {
width:189px;
height:189px;
background-image:url('../images/kontakt-os.png');
background-position: top;
cursor:pointer;
border-radius: 100px;
}

IE 9 dotted lines around Checkbox

Problem with IE 9 and earlier IE browsers putting dotted lines around my checkboxs. It seems to want to call post textarea and post input adding a border around the checkbox and then calling post input focus and putting a background around it.
The dotted line wont go away even if I put border 0px in post input. No other browser FF, chrome does this....
Nothing to do with the checkbox .reset file
Image in IE 9: http://i46.tinypic.com/hvqj2g.png
Code Calling: http://i46.tinypic.com/30ic1f5.png
#post textarea,
#post input {
border:1px solid #ddd;
}
#post textarea:focus {
outline: none;
ie-dummy: expression(this.hideFocus=true);
}
#post input:focus {
-moz-box-shadow: 0px 0px 0px 2px #eee ;
-webkit-box-shadow: 0px 0px 0px 2px #eee ;
box-shadow: 0px 0px 0px 2px #eee ;
background: #fefcbe;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#post input#submit-btn{
background: #eee;
color:#444;
text-shadow: 1px 1px 1px #fff;
}
Any ideas for IE 9?
The dotted line is “focus rectangle”, a usability feature that has unfortunately been implemented inconsistently in browsers. As you remark in your comment, it disappears if you set outline: none on the element; the focus rectangle is technically an outline resulting from a browser’s default style sheet. This means, among other things, that a person who uses the Tab key to move inside the page (possibly because he has to) will not see any focus indicator there, i.e. does not see where he is.
Depending on the state (Quirks Mode vs. “Standards” Mode) of IE 9, the focus rectangle appears around the checkbox, or around the associated label. The comments above apply to “Standards” mode.
Your issue of “its acting like a text box” as per your comment cannot be resolved without knowing what you mean by it and without having access to the code. Please post actual code or a URL of code, not a screenshot that contains an image of a fragment of code.
Works for me:
element:focus{
outline: thin transparent;
}
try using some javascript in your HTML element:
<input onclick="this.blur()" />

Wonky text anti-aliasing when rotating with webkit-transform in Chrome

I'm rotating an element using -webkit-transform: rotate() and in Chrome 14.0.835.2 dev-m it's doing some really weird stuff to the text inside the element. It reminds me of a similar effect you get in Photoshop when you rotate text using "smooth" anti-aliasing instead of "crisp".
Anyone know what's going on here? Is it specific to this webkit or Chrome version or is there something I can do to fix it? (It's also not anti-aliasing the borders between list elements)
Here's the CSS:
div.right-column.post-it
{
position: relative;
width: 240px;
background-color: #fe9;
padding: 20px;
-webkit-transform: rotate(.7deg);
background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
box-shadow: 1px 1px 0 #ddccaa,
2px 2px 0 #dbcaa8,
3px 3px 0 #d9c8a6,
4px 4px 0 #d7c6a4,
5px 5px 0 #d5c4a2,
6px 6px 1px #d3c2a0,
4px 4px 2px rgba(90,70,50,.5),
8px 8px 3px rgba(90,70,50,.3),
12px 12px 5px rgba(90,70,50,.1);
}
Try triggering the CSS 3d Transform mode with webkit. this changes the way chrome renders
-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);
edit
There also a Webkit only style declaration -webkit-font-smoothing which takes the values
none
subpixel-antialiased
antialiased
where subpixel-antialiased is the default value.
Alas, the subpixel antialias is no good solution for rotated text. The rendering machine cant handle that. The 3d transform switches to just antialiased. But we can try to set it directly.
See here http://maxvoltar.com/archive/-webkit-font-smoothing
The blurred fonts are caused by a weird webkit issue invloving -webkit-backface-visibility. This took me forever to figure out, and I haven't seen it anywhere else on the web yet.
I now add -webkit-backface-visibility: hidden; to the body of my site as a CSS reset style. Watch it sharpen the fonts on your entire site, its amazing. You're transformations are not 3d so this wont affect anything anyway, but if you do decide to do 3d transformations somewhere else on your site just add back -webkit-backface-visibility: visible; to the specific element. Should also fix the flickering too.

Transparent shadows in IE

I have the following code, which makes a box with rounded corners and shadow. It should be compatible with all browsers and it really is, but the thing is I need transparent shadow and IE doesn't support RGBA values :(
<style>
#box {
width: 250px;
height: 250px;
background-color: #1e9ad3;
padding: 20px;
margin: 20px;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
behavior: url(PIE.htc);
box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
-webkit-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
}
</style>
<body>
<div id="box">
Hello world!
</div>
</body>
Any suggestions how to do this? My "box" could be on different backgrounds, or on the background with texture, so that's why I can't make the color of shadow for example light grey.
Here's the live example: http://bbin.own.cz/box.html
The CSS3Pie documentation gives the answer.
PIE parses RGBA color values wherever they are allowed. However it is only able to successfully render their opacity value in a few contexts. In all other contexts they will be rendered with the correct RGB color, but fully opaque. Here are the supported contexts in which the opacity will be rendered correctly:
The solid background-color as specified in the -pie-background property.
The color value of box-shadow, if the shadow has no blur.
In short, the answer is no, this can't be done. IE simply doesn't support RGBA properly. CSS3Pie is able to do it in a few contexts, but a box shadow with a blur is not going to work.
If CSS3Pie can't do it, then it's a pretty good bet that it simply isn't possible in IE.
You'll be able to do it if you lose the blur, but of course that changes the whole effect, so it's not really a solution for you.
You'll need to use custom MS settings for pre IE8
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
Havent tested this but you can google for more info. source

Resources