HTML select box not showing drop-down arrow on android version 4.0 when set with background color
Question
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>
5 answers
solution1
18 2013-02-13 09:58:03
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;
}
solution2
4 2014-06-29 05:31:07
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>
solution3
0 2013-02-08 13:28:49
something like this might work to recalculate a moment after since the outerHeight of the children was wrong on android at the time (as I mentioned earlier).
window.setTimeout(function() {$(window).trigger('resize');}, 1500);
...might work? Yes that seems to help.
Obviously you just want this to trigger once after the initial loading phase has had time to pass (in obvious error of the spec, which all others are currently complying with).
solution4
0 2013-09-05 06:31:55
As Matt indicated if you apply any type of border or background to the menu you will vaporize the drop down arrow.
Simplest solution, just remove any border or custom background color. This will leave you with a nice white and gray "modern" looking drop down arrow on Android devices. I don't think there are any sites that it wouldn't fit fine in.
solution5
0 2016-06-01 08:41:24
If you don't want to use JavaScript for that and/or just feel bad about UA sniffing (as you should), but are okay with targeting few browsers less:
select
{
/* common, “safe” styles */
}
@supports (appearance: none)
{
select
{
/* borders and backgrounds */
}
}
Noticeable absentees are all of IEs (Edge will get full styles): http://caniuse.com/#feat=css-featurequeries
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.