DropdownInputWidget PHP mode, non-JS-infused is currently, as of v0.31.2, carrying some troubled UI and interaction glitches:
All (modern) browsers:
- Focus border right is not shown due to solution originally chosen to have basic styling of DropdownInputWidget's select at all:
Example from Special:Preferences in OOUI mode:
Example from OOUI demo:
(Tested in Firefox 60.)
- Native option menu is shown in the native offset with the common sizing instead of being bigger than calling select.
Firefox/macOS:
- Due to background-color set on select the :hover behaviour is messy resulting the option items to grow and shrink
IE 8:
- Right border is doubled in default mode
- Padding together with small space left (equals ~14px) for textual content, label is cut off and dropdown button is very small)
IE 9:
- Vendor/native dropdown button is partly shown instead of being pushed out of hidden overflow limit
Expected result
- With smaller market share of IE 8 & 9 & Firefox <=34, it's time to revisit this, not using solution #2, but solution #1. Providing IE 10-11, Edge, Firefox 35+ and all other modern browsers a styled and focusable select without messy menu behaviour in certain browsers and degrade gracefully in older browsers…