Last Comment Bug 716550 - Can't change borders or backgrounds of checkboxes and radio buttons from author stylesheets
: Can't change borders or backgrounds of checkboxes and radio buttons from auth...
Status: UNCONFIRMED
DUPEME
:
Product: Core
Classification: Components
Component: Layout: Form Controls (show other bugs)
: 9 Branch
: x86 Windows NT
: -- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
: 950302 1084352 (view as bug list)
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2012-01-09 07:58 PST by SiPlus
Modified: 2014-10-22 20:39 PDT (History)
6 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
Example of this bug (9.42 KB, text/html)
2012-01-09 07:58 PST, SiPlus
no flags Details

Description SiPlus 2012-01-09 07:58:49 PST
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.


Actual results:

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.


Expected results:

The controls shouldn't have border and should have transparent background and foreground color - all properties should be customizable.
Comment 1 SiPlus 2012-01-14 07:53:50 PST
More proof of why it should be fixed:

http://www.w3.org/TR/CSS2/cascade.html

> All user and author rules have more weight than rules in the UA's default style sheet.
Comment 2 SiPlus 2012-02-12 08:36:50 PST
Hey!
Comment 3 Boris Zbarsky [:bz] 2012-03-26 11:33:03 PDT
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.
Comment 4 Kang-Hao (Kenny) Lu [:kennyluck] 2012-03-26 11:58:45 PDT
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.

http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#hidden-elements
Comment 5 Boris Zbarsky [:bz] 2012-03-26 13:59:07 PDT
Yeah, as originally summarized the bug is just invalid; that's the expected behavior of !important properties in the UA level.
Comment 6 Mats Palmgren (:mats) 2013-12-15 03:40:07 PST
*** Bug 950302 has been marked as a duplicate of this bug. ***
Comment 7 :Gijs Kruitbosch 2014-10-22 04:14:19 PDT
*** Bug 1084352 has been marked as a duplicate of this bug. ***
Comment 8 :Gijs Kruitbosch 2014-10-22 04:20:41 PDT
(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
> them.

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...). :-(
Comment 9 Boris Zbarsky [:bz] 2014-10-22 20:38:32 PDT
> 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

Really?

  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.
Comment 10 Boris Zbarsky [:bz] 2014-10-22 20:39:23 PDT
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.

Note You need to log in before you can comment on or make changes to this bug.