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

Discussion in 'Resolved Bug Reports' started by CyberAP, Jul 22, 2013.

  1. CyberAP

    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.
    rellect and Mirovinger like this.
  2. chocochaos

    chocochaos Member

    This is not happening to me on android 4.0.4.
  3. rellect

    rellect Well-Known Member

    Can confirm this issue as well with same device

  4. Mike

    Mike XenForo Developer Staff Member

    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.
  5. CyberAP

    CyberAP Well-Known Member

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

    CyberAP Well-Known Member

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

Share This Page