• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Fixed <select> elements revert to default appearance when active

CyberAP

Well-known member
#1
This only happens on mobile devices. To reproduce: open Thread Display Options anywhere on forum. Notice how the element that is autofocused looks like a simple textfield. Click on another select element and it also now misses its usual appearance, but the previous element looks fine.
Tested on iPhone 5, iOS 6.1.4.

How to fix:

select { -webkit-appearance: menulist !important; }

Downsides: using !important may (and sometimes it certainly will) break things.
 

Mike

XenForo developer
Staff member
#4
This seems to happen when a background (image) is applied to the select. I don't understand why that effectively turns the appearance to "none" but it's easy enough to fix. It only needs to be applied to select.textCtrl.
 

CyberAP

Well-known member
#6
Debugged. Seems to be an iOS bug. There is no CSS selector that changes that, but the -webkit-appearance calculated property changes.