web-dev-qa-db-fra.com

Styling la première option d'une entrée <select> sur iOS

J'essaie de styliser une entrée select sur iOS. La première option ou l'état initial doit avoir une taille de police plus petite mais pas le reste des options.

J'ai la structure html suivante:

<select class="dropdown">
    <option selected="" value="Navigation">Navigation</option>
    <option value="some-link">Whatever</option>
    <option value="some-link">Another option</option>
    <option value="some-link">Why</option>
    <option value="some-link">What</option>
</select>

Mon CSS pour cela ressemble à ceci:

select {
    -webkit-appearance: none;
    font-family: 'Custom-Font', sans-serif;
    font-size:.5em
    line-height:1.8em; // optical center
    background-color: #ccc;
    color: #333;
    border: none;
    padding: 6px 10px 4px 10px;
}

.dropdown {
    background-image: url(img/assets.svg);
    background-position: right 2px;
    background-repeat: no-repeat;
    width: 100%;
    display:block;
    margin-bottom:-1.5em;

    option:not(:first-of-type) {
        font-size:1.5em;
    }
}

Le menu <select> ressemble exactement à ce que je veux. Il est écrit "Navigation" dans une boîte gris clair avec une taille de police plutôt petite.

Cependant, lorsque vous cliquez/tapez sur la select sur mon iphone, la vue de l'interface utilisateur native d'iOS affiche toutes les options également dans une très petite taille de police.

Comment puis-je faire en sorte que l'option selected (ou la zone elle-même) utilise la mise en forme personnalisée, mais pas les options. Je veux que mes options aient une taille de police lisible «normale».

Des idées à ce sujet? J'ai essayé avec option:not(:first-of-type) et augmenter la taille de la police mais sans effet!

iphoneioscsscss3select
7
matt

Malheureusement, il n'y a pas de moyen de le faire. iOS Safari prend le contrôle total du contenu interne des listes de select. Voici une référence pour la vérification: petit lien .

Une façon d'y parvenir serait de simuler le menu déroulant/sélectionner à l'aide de JavaScript.

Ce n'est pas très préférable, mais si vous absolument avez besoin de changer le style par défaut, alors je crains que ce soit la seule solution; voici une démo qui devrait vous donner une idée sur la façon de faire la simulation: un autre petit lien .

14
Chris

Essayez ce 100% travaillé pour moi

select { 
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
}
1
user339884

Pour ce que ça vaut - j'avais un menu déroulant <select> transparent avec un rayon de bordure à la fermeture. Sur iOS (je ne suis pas sûr à propos d'Android, je ne l'ai pas testé), la zone grise par défaut pour le <select> apparaîtrait dans ma bordure personnalisée, ce qui était peu attrayant et indésirable.

Pour me débarrasser de la boîte grise intérieure, j’ai utilisé le CSS suivant:

-webkit-appearance: none;

Et plus encore - concernant le sujet de ce PO. Bootstrap offre une solution pratique avec une excellente documentation pour permettre des listes déroulantes personnalisées avec Javascript. Vérifiez le ici.

0
domdambrogia