Menu
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> 
220
Attach Inspector, press Ctrl+Shift+LMB on that arrow and you'll see what you should change. It's a stroke of <button role="dropdown" /> element, uses CSS variable “panel-text”. I know the selector.
There is no special pseudo elements for select dropdown icon in css. But you can change the position of the icon by background property. Or else use this kind of "height" or "line-height" for good look.
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; } 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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
