Admin Select CSS

[WraithKenny]

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.

[WraithKenny]

Before

[WraithKenny]

After

[SergeyBiryukov]

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.

[WraithKenny]

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.

[helenyhou]

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

[WraithKenny]

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.)

[MikeHansenMe]

tested, looks good

[helenyhou]

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.

[MikeHansenMe]

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.

[SergeyBiryukov]

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).

[MikeHansenMe]

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.

[WraithKenny]

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

[nacin]

Came in with [10943].

[nacin]

In [22282]:

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