454625 - Firefox internal stylesheets override <select> line-height with an !important declaration even when appearance is set to "none"

Reporter

Description

•

16 years ago

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_4; en-us) AppleWebKit/525.18 (KHTML, like Gecko) Version/3.1.2 Safari/525.20.1
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.0.1) Gecko/2008070206 Firefox/3.0.1

Firefox internal stylesheets override <select> line-height with an !important declaration. I see it when Firebug is enabled and when it is disabled.

Reproducible: Always

Steps to Reproduce:
1.
2.
3.



Firefox also aggressively caches everything even when I have cache set to 0. I must hard refresh.

:Ms2ger (he/him; ⌚ UTC+1/+2)

Comment 1

•

14 years ago

True. This isn't a bug.

Status: UNCONFIRMED → RESOLVED

Closed: 14 years ago

Component: General → Layout: Form Controls

OS: Mac OS X → All

Product: Firefox → Core

QA Contact: general → layout.form-controls

Hardware: PowerPC → All

Resolution: --- → INVALID

David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)

Comment 2

•

10 years ago

There are reports in bug 349259 that other browsers support 'line-height' on <select>, so reopening, although I'd like to see further data.

Status: RESOLVED → REOPENED

Ever confirmed: true

Resolution: INVALID → ---

David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)

Comment 3

•

10 years ago

(Note that bug 610733 covers the behavior of 'height' on <select>, which is different from 'line-height'.)

Status: REOPENED → NEW

Boris Zbarsky [:bzbarsky]

Updated

•

10 years ago

Flags: needinfo?(x.redir)

David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)

Comment 4

•

10 years ago

(Apparently the claims that other browsers honor 'line-height' are false, although testcases demonstrating otherwise would be welcome.)

philippe (part-time)

Comment 5

•

10 years ago

(In reply to David Baron [:dbaron] (needinfo? me) (UTC-7) from comment #4)
> (Apparently the claims that other browsers honor 'line-height' are false,
> although testcases demonstrating otherwise would be welcome.)

Not completely correct. Safari and Chrome running on OS X 10.9 and Mobile Safari on IOS 7 do respect the specified line-height in one specific case: when -webkit-appearance: none is specified. I'll attach a test case next.

Not sure what Chrome on other platforms does.

philippe (part-time)

Comment 6

•

10 years ago

Attached file test case — Details

the cyan box (4th from left) respects the specified line-height.

Boris Zbarsky [:bzbarsky]

Comment 7

•

10 years ago

Ah, so if you stop trying to make it look like a <select> at all, ok.  I would expect that WebKit/Blink do that consistently across platforms; it almost certainly falls directly out of how they implement -webkit-appearance by falling back to a non-custom box type.

Acemir Sousa Mendes

Comment 8

•

10 years ago

Comment on attachment 8396163 [details]
test case

><!doctype html>
><html lang="en">
><head>
><meta charset="utf-8">
><title>test: something</title>
><meta name="viewport" content="width=device-width"> <!-- , minimal-ui -->
><style type="text/css">
>
>html {
>	/*background: rgb(250,250,250)*//* url(../_img/grid2a.png) 10px 10px*/;
>	color: rgb(10,10,10);
>	font: 400 100%/1.42 'Helvetica Neue', 'Arial', sans-serif;
>	
>	/*text-rendering: optimizeLegibility;*/
>	
>}
>body { margin: 0 20px; }
>
>select { width: 13em; border: 1px solid; background-color: yellow;  }
>
>.a { line-height: 3em; }
>
>.b {  font-size: .85rem; font-family: 'Helvetica Neue', Arial, sans-serif; line-height: 3em; }
>.c {  background-color: cyan; -webkit-appearance: none;-moz-appearance: none;}
>
></style>
>
></head>
>
><body>
><p><select><option selected="selected" value="north">north</option><option value="south">south</option></select>
><select class="a"><option selected="selected" value="north">north</option><option value="south">south</option></select>
><select class="b"><option selected="selected" value="north">north</option><option value="south">south</option></select>
><select class=" b c"><option selected="selected" value="north">north</option><option value="south">south</option></select>
>
></body>
></html>

Acemir Sousa Mendes

Comment 9

•

10 years ago

Comment on attachment 8396163 [details]
test case

><!doctype html>
><html lang="en">
><head>
><meta charset="utf-8">
><title>test: something</title>
><meta name="viewport" content="width=device-width"> <!-- , minimal-ui -->
><style type="text/css">
>
>html {
>	/*background: rgb(250,250,250)*//* url(../_img/grid2a.png) 10px 10px*/;
>	color: rgb(10,10,10);
>	font: 400 100%/1.42 'Helvetica Neue', 'Arial', sans-serif;
>	
>	/*text-rendering: optimizeLegibility;*/
>	
>}
>body { margin: 0 20px; }
>
>select { width: 13em; border: 1px solid; background-color: yellow;  }
>
>.a { line-height: 3em; }
>
>.b {  font-size: .85rem; font-family: 'Helvetica Neue', Arial, sans-serif; line-height: 3em; }
>.c {  background-color: cyan; -webkit-appearance: none; -moz-appearance: none;}
>
></style>
>
></head>
>
><body>
><p><select><option selected="selected" value="north">north</option><option value="south">south</option></select>
><select class="a"><option selected="selected" value="north">north</option><option value="south">south</option></select>
><select class="b"><option selected="selected" value="north">north</option><option value="south">south</option></select>
><select class=" b c"><option selected="selected" value="north">north</option><option value="south">south</option></select>
>
></body>
></html>

Acemir Sousa Mendes

Comment 10

•

10 years ago

Could <select> to respect the line-height specified at least when it has '-moz-appearance: none'?

Maxime Thirouin

Comment 11

•

10 years ago

Please fix this, you will have lots of love from me. This is painful to maintain a vertical rhythm using padding & no control on the line-height :/

Luke Underwood

Comment 12

•

8 years ago

Agree with Maxime. I can't layout my field elements in a line without the select being an odd height to the others due to line-height inconsistencies. Other browsers seem to get it right

jacob

Comment 13

•

7 years ago

I also agree, this should be addressed. When `-moz-appearance` is set to `none`, it should respect the `line-height` set by the developer.

Boris Zbarsky [:bzbarsky]

Updated

•

7 years ago

Summary: Firefox internal stylesheets override <select> line-height with an !important declaration. → Firefox internal stylesheets override <select> line-height with an !important declaration even when appearance is set to "none"

Dennis Schubert [:denschub]

Updated

•

7 years ago

Flags: webcompat?

See Also: → https://webcompat.com/issues/6062

Mike Taylor [:miketaylr]

Updated

•

7 years ago

Depends on: 1368555

Mike Taylor [:miketaylr]

Updated

•

7 years ago

Flags: webcompat?

Whiteboard: [webcompat]

Karl Dubost💡 :karlcow

Comment 15

•

6 years ago

This is defined in https://dxr.mozilla.org/mozilla-central/rev/6ff60a083701d08c52702daf50f28e8f46ae3a1c/layout/style/res/forms.css#241

```css
select {
  margin: 0;
  border-color: ThreeDLightShadow;
  background-color: -moz-Combobox;
  color: -moz-ComboboxText;
  font: -moz-list;
  /*
   * Note that the "UA !important" tests in
   * layout/style/test/test_animations.html depend on this rule, because
   * they need some UA !important rule to test.  If this changes, use a
   * different one there.
   */
  line-height: normal !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  text-align: start;
  cursor: default;
  box-sizing: border-box;
  -moz-user-select: none;
  -moz-appearance: menulist;
  border-width: 2px;
  border-style: inset;
  text-indent: 0;
  overflow: -moz-hidden-unscrollable;
  text-shadow: none;
  /* No text-decoration reaching inside, by default */
  display: inline-block;
  page-break-inside: avoid;
  overflow-clip-box: padding-box !important; /* bug 992447 */
}
```

Karl Dubost💡 :karlcow

Updated

•

6 years ago

See Also: → https://webcompat.com/issues/5489

Karl Dubost💡 :karlcow

Updated

•

6 years ago

See Also: → https://webcompat.com/issues/16927

Comment hidden (obsolete)

You are able to set the line-height property of the <select> element by using !important in your CSS as well, that overwrites that !important declared in the internal stylesheet. This trick can be used until they remove the !important when -moz-appearence is set to none.

David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)

Comment 17

•

6 years ago

comment 16 is incorrect; !important declarations in the UA style sheet override all other declarations.

Stefan Maric

Comment 18

•

6 years ago

After 10 years, this seems to be finally patched: https://hg.mozilla.org/mozilla-central/rev/50a3c9a567e3

Yay! 🎉

Karl Dubost💡 :karlcow

Comment 19

•

6 years ago

Ah indeed through Bug 1499578
mats, should we close this?

And I checked the webcompat issues linked above, they have been fixed by https://hg.mozilla.org/mozilla-central/rev/50a3c9a567e3

Thanks Stefan for posting it. 
Thanks mats for the hard work.

Flags: needinfo?(mats)

Mats Palmgren (inactive)

Assignee

Comment 20

•

6 years ago

The 'line-height' issue should be fixed in v64 hopefully (bug 1499578 + bug 1501908).
(we also support -webkit-appearance:none now)

Assignee: nobody → mats

Status: NEW → RESOLVED

Closed: 14 years ago → 6 years ago

Depends on: 1499578

Flags: needinfo?(x.redir)

Flags: needinfo?(mats)

Resolution: --- → FIXED

Target Milestone: --- → mozilla64