HTML select box not showing drop-down arrow on android version 4.0 when set with background color

javascript html css cordova webkit

32,291

Solution 1

The Android Browser's rendering of <select>s is buggy and will remove the normal styling if a background or border is applied.

Since <select>s not looking like <select>s is a pretty big usability issue, your best bet is to not style them for this browser only.

Unfortunately, there's no pure CSS way of selecting/excluding the Android Browser, so I recommend you use Layout Engine (https://github.com/stowball/Layout-Engine), which will add a class of .browser-android to the <html> tag.

You could then style all <select>s except on Android Browser, like so:

html:not(.browser-android) select {
    background: #0f0;
    border: 1px solid #ff0;
}

Solution 2

I had this same issue & i was wondering till now why this is happening as it don't not happen on some of the other projects.

While trying to learn more about Bootstrap & Foundation Framework i found the solution on bootstrap as they have raised this problem on some mobile device if we mentioned border or background for the drop-downs.

I am not taking credit from any one but would like to share links of page where it is mentioned & solution is also given

Bootstrap: https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/#select-menu

JS Bin: http://jsbin.com/OyaqoDO/2

I hope this will be useful to other who might face this issue this solution is related to bootstrap. & can me modified to your project needs.

<script>
var nua = navigator.userAgent;
var is_android = ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));
if(is_android) {
        $('select.form-control').removeClass('form-control').css('width', '100%');

}
</script>

32,291

Mayukh Raaj

Software engineer working on mobile and web based technology.

Updated on November 14, 2020

Comments

Mayukh Raaj over 3 years
I need to set the background color for select box as yellow. When i tested,it does show box with yellow color and arrow on android 2.3 and android 3.0.

But on android 4.0 it shows the select as complete yellow without the drop-down arrow.

Any idea how to resolve the issue?

I am designing this with phone-gap.

This is my code where i am setting background-color for html select.
```
<select style="background-color:#FFFF00;border:#FFFF00;height:25px;font-family:Arial, Helvetica, sans-serif; color:#000000; font-size:14px; font-weight:bold; text-align:center;">
          <option></option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>

        </select>
```
- Boaz about 11 years
  
  Have you tried removing the height and/or font-size properties?
- Kozuch almost 10 years
  
  There is an official Android bug about this filled here: code.google.com/p/android/issues/detail?id=48379
- Admin about 8 years
  
  It's a little bit late, but I stumbled upon similar thing, I found out that I had a styling of -webkit-appearance:none; I removed that styling and it started showing up again
- The One about 5 years
  
  This post is mentioned in Bootstrap official docs getbootstrap.com/docs/4.3/getting-started/browsers-devices
Amol Ghotankar almost 11 years

Any other way to fix this! other than not applying style if we can add the style back the way android browser will add it?
Matt Stow almost 11 years

@Amol Ghotankar No, not as far as I know. As soon as they've had styles applied, they render as text boxes :(
Amol Ghotankar almost 11 years

Thanks! Lets see if anything else works, because if I have 100 select boxes in my project I will have to keep adding this extra class to all of them. Also I play a lot with js to add and remove class so this can get even complex for me.
escapedcat over 10 years

Hm, '.ua-android-browser' seems to be gone, at least in 4.2.2. I thought using '.ua-android' or '.ua-mobile' or '.ua-mobile-android' might solve this problem, but Chrome for Android can't be distinguished. So I guess I will go for unstyled selects for now.
Matt Stow over 10 years

@escapedcat v0.7.0 of Layout Engine removed the need for CssUserAgent and changed the Android Browser class name to .browser-android. I've updated my answer to reflect that
escapedcat over 10 years

I just went crazy cause I was sure you wrote CssUserAgent before and now it says Layout-Engine. But I checked the revisions and now I'm good again. Haha! Thanks for your info @MattStow