The default bug view has changed. See this FAQ.

Can't change borders or backgrounds of checkboxes and radio buttons from author stylesheets

RESOLVED INVALID

Status

()

Core
Layout: Form Controls
RESOLVED INVALID
5 years ago
2 months ago

People

(Reporter: SiPlus, Unassigned)

Tracking

9 Branch
x86
Windows NT
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: DUPEME)

Attachments

(1 attachment)

(Reporter)

Description

5 years ago
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.
(Reporter)

Updated

5 years ago
Component: Untriaged → General
(Reporter)

Updated

5 years ago
Keywords: css-moz, css1
(Reporter)

Updated

5 years ago
Keywords: css1
(Reporter)

Updated

5 years ago
Version: 8 Branch → 9 Branch

Updated

5 years ago
Attachment #586996 - Attachment mime type: text/plain → text/html
(Reporter)

Updated

5 years ago
Summary: !important properties in browser code are too restrictive → !important properties in browser code restrict modification of certain properties
(Reporter)

Comment 1

5 years ago
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.
(Reporter)

Comment 2

5 years ago
Hey!

Updated

5 years ago
Component: General → Style System (CSS)
Product: Firefox → Core
QA Contact: untriaged → style-system
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.
Component: Style System (CSS) → Layout: Form Controls
Keywords: css-moz
QA Contact: style-system → layout.form-controls
Summary: !important properties in browser code restrict modification of certain properties → Can't change borders or backgrounds of checkboxes and radio buttons from author stylesheets
Whiteboard: DUPEME
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
Yeah, as originally summarized the bug is just invalid; that's the expected behavior of !important properties in the UA level.

Updated

3 years ago
Duplicate of this bug: 950302

Updated

3 years ago
Duplicate of this bug: 1084352

Comment 8

3 years ago
(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...). :-(
Flags: needinfo?(bzbarsky)
> 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.
Flags: needinfo?(bzbarsky)
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.
Changing this would be incompatible with Edge and Chrome.
For both background and border properties.

(In reply to Boris Zbarsky [:bz] (still a bit busy) from comment #9)
> All of which is to say, Youtube should not be using -moz-appearance:none
> here; it does absolutely nothing they want.

I'll unship -moz-appearance for non-privileged content in bug 1333482 and
add support for -webkit-appearance:none, which should put and end to crap
like this.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 2 months ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.