Make WordPress Core

Opened 11 months ago

Closed 5 months ago

Last modified 5 months ago

#24387 closed enhancement (wontfix)

Remove borders and styles on select elements

Reported by: mmuro Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.5
Component: Administration Keywords: has-patch
Focuses: ui Cc:


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.

Attachments (5)

select-no-border.diff (1.8 KB) - added by mmuro 11 months ago.
ff-select-border-before.png (10.1 KB) - added by mmuro 11 months ago.
ff-select-border-after.png (11.4 KB) - added by mmuro 11 months ago.
diegradientsdie.diff (1.4 KB) - added by iammattthomas 5 months ago.
Comparison of the select element with custom styles vs OS defaults
selects.png (137.3 KB) - added by iammattthomas 5 months ago.
Comparison of the select element with custom styles vs OS defaults

Download all attachments as: .zip

Change History (15)

mmuro11 months ago

comment:1 follow-up: SergeyBiryukov11 months ago

  • Component changed from Appearance to Administration
  • Keywords has-patch ui-focus added
  • Version changed from trunk to 3.5

Removing :focus styles might have accessibility concerns.

Screenshots (before and after) would be helpful here.

comment:2 in reply to: ↑ 1 mmuro11 months ago

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.

comment:3 mordauk10 months ago

  • Cc pippin@… added

comment:4 sunnyratilal10 months ago

  • Cc sunny@… added

comment:5 sillybean9 months ago

Seems like a good change to make in MP6.

comment:6 melchoyce5 months ago

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.

iammattthomas5 months ago

Comparison of the select element with custom styles vs OS defaults

iammattthomas5 months ago

Comparison of the select element with custom styles vs OS defaults

comment:7 iammattthomas5 months ago

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.

comment:8 iammattthomas5 months ago

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.

comment:9 iammattthomas5 months ago

  • Cc mt@… added
  • Resolution set to worksforme
  • Status changed from new to closed

comment:10 SergeyBiryukov5 months ago

  • Milestone Awaiting Review deleted
  • Resolution changed from worksforme to wontfix
Note: See TracTickets for help on using tickets.