Remove borders and styles on select elements

[mmuro]

The default admin CSS adds borders, background colors, and other styling to <select> elements that actually cause the default browser styling to become unstyled in Firefox on the Mac.

The default OS and browser styles actually handle select boxes pretty well.

I propose that these styles be removed from any global <select> element. If borders need to stay, they should be applied using a more descriptive selector so if I wanted to use default browser styling in a plugin I can.

I tested this in Firefox (Mac), Safari (Mac), Chrome (Mac), Firefox (Win) and IE 8 by looking at various pages with select boxes (Posts, Settings, Quick Edit, Categories). The only difference is that on Firefox (Win) the border is blue instead of gray and I believe if it's desired to keep this, then a targeted class can accomplish the same task without affecting other operating systems.

The patch doesn't apply to the blue theme at this time.

[SergeyBiryukov]

Removing :focus styles might have accessibility concerns.

Screenshots (before and after) would be helpful here.

[mmuro]

Replying to SergeyBiryukov:

Removing :focus styles might have accessibility concerns.

The browser and OS itself should have default styles to handle :focus. On Mac, it'll be a blue shadow and on Windows it'll highlight the first value in the list.

[sillybean]

Seems like a good change to make in ​MP6.

[melchoyce]

If we remove all of the select appearance styling, such as borders and backgrounds, we run into the issue where Chrome select boxes will collapse: ​https://cloudup.com/iUcjyM2EBVL

This isn't a major problem on the Settings pages, though the reduced height makes it much harder to select. However, we run into pretty big issues when we look to any page where the select box is aligned alongside a button, such as the post listing page: ​https://cloudup.com/iTh6946awpo

The only real issue on Firefox is the ugly visual styling of the arrows. The way I see it, we have two options to handle this:

1. Remove the arrow using ​this method, then add an image to replace the arrow.
2. Deal with kind of ugly arrows in Firefox until such time when Mozilla fixes this bug.

My vote is for option 2.

[iammattthomas]

Comparison of the select element with custom styles vs OS defaults

[iammattthomas]

Comparison of the select element with custom styles vs OS defaults

[iammattthomas]

selects.png is a comparison of the select element in most browsers we support. (Didn't mean to upload that diff, but oh well.)

As Mel mentioned, the select styles make a pretty noticeable difference in usability because of how small the defaults are on OS X. And while browsers do some very strange things with that arrow, and there's no good way of customizing it just yet, it's still a more consistent look across browsers than using the OS defaults.

I'm going to apply the style declarations from input elements to selects, as they achieve a pretty consistent look in most browsers and don't have any adverse affects in the browsers that don't allow more customization.

[iammattthomas]

In 26308:

Combine border and box-shadow styles for inputs, textareas, and selects. Set border-radius to 0 on these elements to override default styling in iOS. See #24387.