Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#22020 closed enhancement (fixed)

Admin Select CSS

Reported by: WraithKenny Owned by: nacin
Milestone: 3.5 Priority: normal
Severity: trivial Version: 3.5
Component: UI Keywords: has-patch commit
Focuses: Cc:


The css for the select elements can be improved by adding some pixels to the right padding on the option.

#wpcontent option {
padding-right: 6px;

ScreenShots with before and after on FireFox Mac and PC.

Attachments (5)

Screen-Shot.png (27.3 KB) - added by WraithKenny 6 years ago.
Screen-Shot2.png (27.9 KB) - added by WraithKenny 6 years ago.
select-option-css.patch (750 bytes) - added by WraithKenny 6 years ago.
22020.patch (838 bytes) - added by SergeyBiryukov 6 years ago.
22020.2.patch (461 bytes) - added by SergeyBiryukov 6 years ago.

Download all attachments as: .zip

Change History (17)

6 years ago


6 years ago


#1 @SergeyBiryukov
6 years ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 3.5

This was a side effect of [21916]. 22020.patch targets those specific selectors and adds missing styles for .tablenav .actions select in RTL.

Tested in Firefox 15, Chrome 21, IE 8, Opera 12.

#2 @WraithKenny
6 years ago

I think the new padding should apply more broadly; wp-admin/options-general.php or any other options page with a select wouldn't be corrected by a specific selector like #wpcontent .tablenav .actions option.

#3 @helenyhou
6 years ago

Does it need to apply to select elements generally? Uneven padding seems like a non-typical case.

#4 @WraithKenny
6 years ago

The rule that defines padding: 2px; is applied generally (both #wpcontent option and select option define this), overwriting Firefox's built-in style (equivalent to padding: 0 5px 0 3px;) that had accounted for the unevenness. (They use -moz-padding-start, -moz-padding-end.)

In any case, if we use the prefix like the browser style, we can be sure to not cause issues with other vendors, and be ltr/rtl compat (I think). Tested in Firebug:

select option {
    padding: 2px;
#wpcontent option {
    -moz-padding-end: 6px;

(Ive only tested this in Firebug, I don't know if it'll really work, or how padding-end is supposed to work.)

Last edited 6 years ago by WraithKenny (previous) (diff)

#5 follow-up: @MikeHansenMe
6 years ago

  • Cc mdhansen@… added
  • Keywords commit added

tested, looks good

#6 in reply to: ↑ 5 @helenyhou
6 years ago

Replying to MikeHansenMe:

tested, looks good

22020.2.patch, I'm guessing? Tested here, seems fine. Didn't notice any unwanted effects in the admin, looking around.

#7 @MikeHansenMe
6 years ago

yes, 22020.2.patch, I also took a quick look around too see if there were any unwanted side affects but did not notice any.

#8 @SergeyBiryukov
6 years ago

Tested 22020.2.patch in Firefox 16, Chrome 22, IE 7, IE 8, Opera 12.

Fixes the bug in Firefox outlined above, doesn't actually change the appearance in other browsers (apparently only Firefox applies those styles).

Last edited 6 years ago by SergeyBiryukov (previous) (diff)

#9 @MikeHansenMe
6 years ago

Just took a look at Chrome 20 on Ubuntu and it seems the visual problem does not exist nor is affected by the patch removing the line of css. My thought is that the reason the problem only exists in FF may be because of browser default styles on the select.

#10 @WraithKenny
6 years ago

I'm fairly certain all browsers except FireFox simply ignore padding applied to option elements. The 22020.2.patch looks best to me.

#11 @nacin
6 years ago

Came in with [10943].

#12 @nacin
6 years ago

  • Owner set to nacin
  • Resolution set to fixed
  • Status changed from new to closed

In [22282]:

Remove unnecessary styling of an option element's padding. props SergeyBiryukov. fixes #22020.

Note: See TracTickets for help on using tickets.