web-dev-qa-db-fra.com

La zone de sélection HTML n’affiche pas la flèche de la liste déroulante sous Android version 4.0 avec la couleur de fond

Je dois définir la couleur d'arrière-plan de la zone de sélection sur jaune . Lors de mes tests, la boîte affiche une couleur jaune et une flèche sur Android 2.3 et Android 3.0. 

Mais sur Android 4.0, la sélection apparaît comme jaune complet sans la flèche déroulante.

Une idée de comment résoudre le problème?

Je conçois cela avec un écart de téléphone.

C'est mon code où je suis en train de définir 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>
javascripthtmlcsscordovawebkit
21
Mayukh Raaj

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

Puisque <select>s ne ressemble pas à <select>s est un gros problème d’utilisabilité, votre meilleur pari est de ne pas les styler pour ce navigateur uniquement.

Malheureusement, il n’existe pas de méthode purement CSS pour sélectionner/exclure le navigateur Android. Je vous recommande donc d'utiliser Layout Engine ( https://github.com/stowball/Layout-Engine ), ce qui ajoutera une classe de .browser-Android à la balise <html>.

Vous pouvez ensuite styler tous les <select>s sauf sur le navigateur Android, comme suit:

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

J'avais le même problème et je me demandais jusqu'à présent pourquoi cela se produit, car cela ne se produit pas dans d'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 un périphérique mobile si nous avons mentionné la bordure ou l'arrière-plan des listes déroulantes.

Je ne prends aucun crédit de personne, mais voudrais partager des liens de page où il est mentionné et une solution est également donnée

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

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

J'espère que cela sera utile aux autres personnes qui pourraient être confrontées à ce problème. Cette solution est liée au bootstrap. Et puis-je 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>
4
Learning

quelque chose comme cela pourrait fonctionner pour recalculer un moment après puisque la taille extérieure des enfants était fausse sur Android à l'époque (comme je l'ai mentionné plus tôt).

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

...pourrait fonctionner? Oui, cela semble aider.

Évidemment, vous voulez juste que cela se déclenche une fois après que la phase de chargement initiale ait eu le temps de passer (en erreur évidente de la spécification, que tous les autres respectent actuellement).

0
MistereeDevlord

Comme Matt l’a indiqué, si vous appliquez n’importe quel type de bordure ou d’arrière-plan au menu, vous éviterez la flèche déroulante. 

La solution la plus simple, il suffit de supprimer toute bordure ou couleur d'arrière-plan personnalisée. Cela vous laissera une belle flèche déroulante "moderne" blanche et grise sur les appareils Android. Je ne pense pas qu'il y ait des sites où cela ne conviendrait pas. 

0
Compworth

Si vous ne souhaitez pas utiliser JavaScript pour cela et/ou si vous vous sentez mal à propos du sniffing par UA (comme vous le devriez), mais acceptez de cibler moins quelques navigateurs:

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

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

0
saji