Boîte de sélection HTML n'indiquant pas la flèche déroulante sur Android version 4.0 lorsqu'elle est définie avec une couleur d'arrière-plan

Je dois définir la couleur d'arrière-plan pour sélectionner la boîte en jaune. Lorsque j'ai testé, il montre une boîte avec une couleur jaune et une flèche sur Android 2.3 et Android 3.0.

Mais sur Android 4.0, le jaune sélectionné est complet sans la flèche déroulante.

Une idée de la façon de résoudre le problème?

Je conçois cela avec l'espace téléphonique.

C'est mon code où je définis la couleur d'arrière-plan pour sélectionner html.

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

Le rendu du navigateur Android de <select> s est buggy et supprime le style normal si un arrière-plan ou une bordure est appliqué.

Étant donné que <select> s ne ressemble pas à <select> s est un très gros problème d'utilisabilité, votre meilleur pari est de ne pas les <select> pour ce navigateur uniquement.

Malheureusement, il n'y a pas de mode CSS pur de sélectionner / exclure le navigateur Android, donc je vous recommande d'utiliser Layout Engine ( https://github.com/stowball/Layout-Engine ), qui ajoutera une classe de .browser-android à la <html> .

Vous pouvez alors classer tous les <select> s sauf sur le navigateur Android, de la manière suivante:

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

J'avais ce même problème et je me demandais jusqu'à présent pourquoi cela se passe car il ne se passe pas sur certains autres projets.

Tout en essayant d'en savoir plus sur Bootstrap & Foundation Framework, j'ai trouvé la solution sur bootstrap car ils ont soulevé ce problème sur certains appareils mobiles si nous avons mentionné un bordé ou un arrière-plan pour les déroulants.

Je ne prends pas le crédit de personne mais je voudrais partager les liens de la page où il est mentionné et la solution est également donnée

Bootstrap: http://getbootstrap.com/getting-started/

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

J'espère que cela sera utile à d'autres qui pourraient faire face à ce problème, cette solution est liée à bootstrap. Je peux modifier les besoins de votre projet.

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

Quelque chose comme ça pourrait fonctionner pour recalculer un moment après que l'extérieur de la tête des enfants était faux sur Android à l'époque (comme je l'ai mentionné plus tôt).

Window.setTimeout (function () {$ (window) .trigger ('redimensionner');}, 1500);

…pourrait fonctionner? Oui, cela semble aider.

De toute évidence, vous voulez simplement que cela se déclenche une fois que la phase de chargement initial a eu le temps de passer (en erreur évidente de la spécification, que tous les autres se conforment actuellement).

Comme Matt l'indique si vous appliquez un type de bordure ou d'arrière-plan au menu, vous vaporiserez la flèche vers le bas.

Solution la plus simple, supprimez simplement n'importe quelle couleur de fond de bordure ou personnalisée. Cela vous laissera une belle flèche déroulante "moderne" sur les appareils Android. Je ne pense pas qu'il y ait de sites qui ne correspondent pas bien.

Si vous ne souhaitez pas utiliser JavaScript pour cela et / ou que vous vous sentez mal au sujet de l'inhalation de l'UA (comme vous le devriez), mais que vous êtes en mesure de cibler moins de navigateurs:

 select { /* common, “safe” styles */ } @supports (appearance: none) { select { /* borders and backgrounds */ } }

Les absents remarquables sont tous des IE (Edge obtiendra des styles complets): http://caniuse.com/#feat=css-featurequeries