Fixed <select> elements revert to default appearance when active

CyberAP

Well-known member
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.
 
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.
 
Debugged. Seems to be an iOS bug. There is no CSS selector that changes that, but the -webkit-appearance calculated property changes.
 
Top Bottom