macOS: Styling dropdown selection breaks macOS System UI and shows ugly button design
Categories
(Core :: Layout: Form Controls, defect, P3)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox88 | --- | fixed |
People
(Reporter: post, Unassigned)
References
Details
(Whiteboard: [mac:nonnativetheme])
Attachments
(5 files)
macos_firefox_ugly_button-design.png
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:68.0) Gecko/20100101 Firefox/68.0
Steps to reproduce:
Here is a bug report that bugs for a really long time. By default Firefox uses the macOS System UI to show dropdown selections. However applying any CSS styling to a border property breaks the select button e.g. border-width: 1px, border-style: solid, border-color: #cad6de;
Steps to reproduce
jeffersonscher created an excellent page for further testing:
https://www.jeffersonscher.com/res/select-button.html
https://www.jeffersonscher.com/res/select.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>select styling affects button</title>
<style>
body {
font-size: 1.5em;
padding-left: 2em;
}
</style>
</head>
<body>
<div>
<p>Styling combobox borders breaks the OS-specific styling of the button:</p>
<p><select name="test1" style="">
<option value="">no border properties set (default)</option>
<option value="">hello</option>
</select> <select name="test5" style="border: 1px solid #cad6de;">
<option value="">border: 1px solid #cad6de;</option>
<option value="">hello</option>
</select></p>
<p><select name="test2" style="border-width: 1px;">
<option value="">border-width: 1px;</option>
<option value="">hello</option>
</select> <select name="test3" style="border-style: solid;">
<option value="">border-style: solid;</option>
<option value="">hello</option>
</select> <select name="test4" style="border-color: #cad6de;">
<option value="">border-color: #cad6de;</option>
<option value="">hello</option>
</select></p>
</div>
</body>
</html>
Actual results:
Firefox for Mac adds an ugly "down" triangle symbol and grey border to the selection button style. It feels like 1999! This is not related to a single page design. The "ugly button design" is visible on all major sites like zdnet.com, soundcloud.com, Matomo Analytics...
Take a look at my screenshot.
Expected results:
It should match the default macOS System UI. Show "up down" triangles without grey border.
Wow, I missed that bug report. However it's been 4 years and there's still no fix for that.
@howdytom:
Try adding the following to userContent.css.
@charset "utf-8";
/* Make <select>s Mac like */
select {
width: inherit !important;
border: inherit !important;
border-width: inherit !important;
border-style: inherit !important;
border-radius: inherit !important;
background: inherit !important;
background-color: inherit !important;
border-color: inherit !important;
color: inherit !important;
text-indent: inherit !important;
}
select:not([size]):not([multiple]),
select[size="0"],
select[size="1"] {
-moz-appearance: menulist !important;
border-color: initial !important;
background: initial !important;
background-color: #fff !important;
color: initial !important;
padding: initial !important;
font: -moz-list !important;
border-width: initial !important;
border-style: initial !important;
text-indent: initial !important;
}
select:not([size]):not([multiple])[disabled],
select[size="0"][disabled],
select[size="1"][disabled] {
color: GrayText !important;
}
@Eiichi: Thanks for sharing this wonderful workaround. Finally select matches the default macOS System UI. Your fix should be committed to the next FF release. I don't understand why this UI Bug has not been fixed for many years.
What can we do?
@howdytom: For your information.
Since Bug 1541233 landed on Firefox Nightly repository, Firefox 69.0 doesn't allow use of userChrome.css or userContent.css files by default.
To use these files for Firefox customization, you will need to manually set as follows:
user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);
@Eiichi: Thanks. Users should not hack or customize Firefox to get the proper macOS System UI. It's a UI bug for many years. Personally ugly form button designs are the main reason to switch back to Safari/Chrome. Is there any way to mark this bug with higher priority?
I was able to reproduce this on MacOs 10.13 on all versions
Release 68.0.1
Beta 69.0b11
Nightly 70.0a1
I was able to reproduce this on MacOs 10.13 on all versions
Release 68.0.1
Beta 69.0b11
Nightly 70.0a1
|
||
Comment 9•5 years ago
|
||
The priority flag is not set for this bug.
:jfkthame, could you have a look please?
For more information, please visit auto_nag documentation.
|
||
Updated•5 years ago
|
|
||
Updated•5 years ago
|
|
||
Comment 10•3 years ago
|
||
This will get addressed by the landing of bug 1690842, which may occur as early as today. See the attached screenshot for the new look.
|
|
||
Comment 11•3 years ago
|
||
Bug 1690842 has indeed landed and this should now be fixed in current nightly.
|
||
Comment 12•3 years ago
|
||
Attached screenshot is Safari 14.0.3 on Big Sur 11.2.1 and is different from https://bugzilla.mozilla.org/attachment.cgi?id=9204562.
Why this bug marked as fixed?
|
|
||
Comment 13•3 years ago
|
||
Sorry my mistake.
|
|
||
Comment 14•3 years ago
|
||
We are not trying to match Safari's appearance, nor the native appearance of select dropdown buttons. We fixed the "ugly 'down' triangle symbol and grey border" by switching to a new, Firefox-specific theme that looks more modern.
|
||
Updated•3 years ago
|
|
Reporter | |
Comment 15•3 years ago
|
||
Thanks. Why does Firefox not use the native macOS and Windows System OS UI? Why does Mozilla use its own ugly UI design? How decides on such an important point that Firefox-specific theme is more modern?
I have noticed this approach on so many parts of Mozilla product. And it always feels and looks wrong. Frankly this is not I was I hoping for.
|
|
||
Comment 16•3 years ago
|
||
You can follow the history and conversations around non-native theming in bug 1535761 and all the dependent bugs. The short summary is that there are features such as Win32k lockdown and Fission that required us to draw these controls ourselves, rather than deferring to the OS. And similar to Chrome, Edge and other browsers, the decision was made to develop our own designs for these form controls, which will be consistent across platforms.
Description
•