Fixed <select> elements revert to default appearance when active

[CyberAP]

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.

 

[chocochaos]

This is not happening to me on android 4.0.4.

 

[refael]

Can confirm this issue as well with same device

 

[Mike]

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]

It can only be discovered when debugging directly from iPhone, but I don't have Mac to launch Safari 6.

 

[CyberAP]

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