1065311 - Improve styling of <select> dropdown

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Attachment: Firefox current state

Bug 997190 aims to improve the appearance of our unstyled form widgets. Since that, as a whole, is a pretty hairy endeavor, it makes sense to treat one of the most glaring parts of it as a separate bug: the styling of <select> dropdowns.

There's an image describing what's wrong in the current state.
I'll post a mockup of the desired state shortly.

Good test page:
https://dl.dropboxusercontent.com/u/72157/forms.html

Comment 1

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Here's my take on it:
http://phlsa.github.io/ff-unstyled-form-widgets

Michael, what do you think of this as a first step?
We are only talking about the dropdown at the moment (not the form element itself), so we won't have any sizing and compatibility issues.

Comment 2

[Michael Maslaney [:mmaslaney] ([e-mail])]

Nice work, Philipp! I really like the way you treat grouped items and their supporting headers. 

Couple suggestions:

• Utilize the blue (#0095DD) in our style guide for the highlighted and select states

• Increase the margins by a couple of pixels

Comment 3

[Madhava Enros [:madhava]]

Apparently we're moving to native widgets in e10s, which you can test with an e10s window. Does that change anything here?

Comment 4

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

(In reply to Madhava Enros [:madhava] from comment #3)
> Apparently we're moving to native widgets in e10s, which you can test with
> an e10s window. Does that change anything here?

I thought that this was a bug and not a feature.
But thinking about it, using native widgets would probably be one of the better things we could do here. If we are moving to native, they still need some love, at least on OS X.

Comment 5

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

I updated the spec according to Michaels comments:
http://phlsa.github.io/ff-unstyled-form-widgets