Created attachment 586996 [details]
Example of this bug
User Agent: Mozilla/5.0 (Windows NT 6.2; rv:8.0) Gecko/20100101 Firefox/8.0
Build ID: 20111104165243
Steps to reproduce:
Tried to remove borders and colors from checkboxes and radiobuttons using !important border-style, color and background-color defined in <style> element or linked using <link> element.
Because of !important definition of borders and colors (and many other properties in other cases) in Firefox's internal CSS code, my property values didn't apply. However, when I apply the same style as Stylish user style, everything works fine.
The controls shouldn't have border and should have transparent background and foreground color - all properties should be customizable.
More proof of why it should be fixed:
> All user and author rules have more weight than rules in the UA's default style sheet.
The CSS spec doesn't allow !important properties in UA stylesheets at all; those are a UA-specific extension.
And these properties are !important precisely so websites can't change their values. That's because there were lots of websites changing them in ways that make the controls invisible, because other browsers ignored changes to them.
There are existing bug reports covering this issue.
For the original Summary "!important properties in browser code restrict modification of certain properties", I'll note that if I understand correctly, Firefox uses this to make sure that when scripts are on, <noscript> always has 'display: none' no matter how authors change this in their stylesheets. This is a requirement in the HTML spec:
# The user agent is expected to force the 'display' property of noscript
# elements for whom scripting is enabled to compute to 'none', irrespective of
# CSS rules.
Yeah, as originally summarized the bug is just invalid; that's the expected behavior of !important properties in the UA level.
*** Bug 950302 has been marked as a duplicate of this bug. ***
*** Bug 1084352 has been marked as a duplicate of this bug. ***
(In reply to Boris Zbarsky [:bz] from comment #3)
> The CSS spec doesn't allow !important properties in UA stylesheets at all;
> those are a UA-specific extension.
> And these properties are !important precisely so websites can't change their
> values. That's because there were lots of websites changing them in ways
> that make the controls invisible, because other browsers ignored changes to
This was in the past tense in 2012... is this still the case? At least Blink seems to honor them judging by the dupe I just duped (bug 1084352), and the result of youtube wanting to do their own styling is that the checkboxes just look like ... on Gecko (at least to people who've never seen Windows 3.1...). :-(
> is this still the case?
Only one way to tell: get lots of people browsing and complaining about sites with invisible checkboxes.
> At least Blink seems to honor them
data:text/html,<input type="checkbox" style="background: red; border: 2px solid green">
Try that in Blink.
You have to use -webkit-appearance:none for any of those styles to take effect in Blink.
Bug 1084352 isn't really a duplicate of this bug: the site is using -webkit-appearance:none and -moz-appearance:none, but those two properties do totally different things. -moz-appearance:none means "force fallback to rendering of whatever is in forms.css".
All of which is to say, Youtube should not be using -moz-appearance:none here; it does absolutely nothing they want.
Oh, and to be clear, we do want to make styling form controls reasonable. Just randomly changing things is not the right way to get there, though.