Make WordPress Core

Opened 3 years ago

Closed 3 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 3 years ago.
Screen-Shot2.png (27.9 KB) - added by WraithKenny 3 years ago.
select-option-css.patch (750 bytes) - added by WraithKenny 3 years ago.
22020.patch (838 bytes) - added by SergeyBiryukov 3 years ago.
22020.2.patch (461 bytes) - added by SergeyBiryukov 3 years ago.

Download all attachments as: .zip

Change History (17)

@WraithKenny3 years ago


@WraithKenny3 years ago


@SergeyBiryukov3 years ago

comment:1 @SergeyBiryukov3 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.

comment:2 @WraithKenny3 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.

comment:3 @helenyhou3 years ago

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

comment:4 @WraithKenny3 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 3 years ago by WraithKenny (previous) (diff)

@SergeyBiryukov3 years ago

comment:5 follow-up: @MikeHansenMe3 years ago

  • Cc mdhansen@… added
  • Keywords commit added

tested, looks good

comment:6 in reply to: ↑ 5 @helenyhou3 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.

comment:7 @MikeHansenMe3 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.

comment:8 @SergeyBiryukov3 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 3 years ago by SergeyBiryukov (previous) (diff)

comment:9 @MikeHansenMe3 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.

comment:10 @WraithKenny3 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.

comment:11 @nacin3 years ago

Came in with [10943].

comment:12 @nacin3 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.