I have a checkbox allocated the class fehlerfeld.
But the background color of the checkbox is not showed by firefox 1.5.0.4!
Is this normal? The browsers Internet Explorer and Opera that i tested also show this background color.
It's not that Firefox
should
do nothing, it's this Firefox is perfectly correct in doing nothing. Where should the background color be? Inside the checkbox? In the area around the checkbox? Both? There's no standard that says.
Text inputs are fairly straightforward. But things like select boxes, checkboxes, radio buttons, and file inputs don't really have any clear standards. Even when you style buttons, you lose the OS-specific button in favor of a plainer, CSS-colored button.
One workaround is to specify a background colour (or image) for an element behind the checkbox (possibly the form itself). You can then specify an
opacity
for the checkbox in CSS. This will then allow the background colour to show through the checkbox.
eg.
opacity:.5; filter:alpha(opacity=50);
It's not quite the same as you are trying to achieve, but it can make the checkbox appear more "integrated" into the general appearance of the site.
jqp wrote:
It's not that Firefox
should
do nothing, it's this Firefox is perfectly correct in doing nothing. Where should the background color be? Inside the checkbox? In the area around the checkbox? Both? There's no standard that says.
Sure, really? I tested it in opera. This browser makes the rectangle inside the border (without the border itself) colorful. What would be wrong if firefox does this? IMHO this is the best solution. Normal input textfields are also styled with definitions for border, color...why not the checkbox or radio button. They have also a border and a background-color just like normal input textfields.
1. Guess what the spec will be
2. Gecko implementation of guess
3. Websites make use of Gecko's behaviour
4. Spec ends up being something else
5. Gecko changes to be in line with the spec
6. Websites depending on Gecko's behaviour break
See what they've done with opacity, for example. They implemented -moz-opacity until the spec was finalized, then renamed it just "opacity". The difference here is that not only is there no finalized spec, there's no spec at all.
Because the spec may change. Today, you may expect a checkbox's background to appear outside the box. Tomorrow, the spec may say that the background should appear inside the checkbox. Or, the converse could happen. We'd have two difference Firefox versions that do two different things.
Another reason might be that it's just not that easy to do.
There's no clearly obvious thing to do:
I've read through that CSS draft, and it appears that they're not going to even attempt to predict or dictate how to style a widget such as a checkbox. Instead all they're
suggesting
is that you either let the browser use its default widget:
input[type=checkbox] { appearance: normal; display: inline-block; /* it's not a widget anymore, it's just an empty box */ height: 20px; width: 20px; background: url(uncheckedbox.jpg); }
Really, there's not much there that mozilla doesn't already support. It already supports the :checked and :disabled pseudoclasses. Mozilla doesn't support inline-block yet, but there are hacks and workarounds for that. As for just replacing a widget with a box+background, there are probably ways to do that today with some combination of extra HTML, :before or :after pseudoelements, and/or something with -moz-binding (XBL).
Mozilla is generally proactive about supporting new W3C drafts, but even the W3C drafts aren't saying what to do with a browser checkbox widget.
I understand that. Thats why you use -moz* like I initially suggested. That way, people can actually use the feature, it can catch on, and the people designing the specs can (hopefully) slap themselves on the forehead and realize they should have made it a spec in the first place. Even if they don't it at least empowers web developers to do what they want to do without having to jump through hoops to do it -- such as using crazy workarounds like making the field opaque.
