Comment changer la taille de police de la première balise d'option dans un menu déroulant (select)?

Comment puis-je changer la taille de la police pour la première option balise dans un sélectionnez tag? J'ai essayé de changer le CSS pour l'option:premier enfant avec pas de chance.

Je voudrais la première option 25px font-size tandis que les autres éléments de la liste à avoir 12px taille de police.

J'ai déjà lu des tutoriels ici que pouvez modifier la police la couleur et le type de police pour la première option, mais quand j'ai demandé une taille de police sur eux, il ne semble pas le prendre effet.

Cela peut-il être atteint grâce à CSS ou JQuery? Merci!

Code HTML:

<select>
<option>Select (25px)</option>
<option>List 1 (12px)</option>
<option>List 2 (12px)</option>
<option>List 3 (12px)</option>
<option>List 4 (12px)</option>
</select>
  • veuillez fournir votre code
  • Demandez-vous pour cette réponse jsfiddle.net/D58Rz
  • édité avec le code HTML.
  • toutes les options ont la même taille de police dans Chrome
  • Peut-être il y a quelque chose dans google Chrome shadow DOM, mais de sélectionner l'apparence est rendu définis et non standard. Dans le navigateur Safari Mobile qu'il utilise native INTERFACE utilisateur avec aucun style ou de balisage.
InformationsquelleAutor hello | 2014-03-19
  1. 4

    Si ce ci-dessous est l'option que vous voulez changer la taille de la police dans la balise SELECT

        <option id="op1">option 1</option>

    Placez le code ci-dessous dans l'élément de tête

       <script>
     document.getElementById("op1").style.fontSize ="25px";
   </script>
    • salut, j'ai essayé ça, mais c'est hériter 12px même si j'ajoute le jquery dans la tête.
    • <optgroup style="font-size:10px"> <option>Option 1</option> </optgroup>
    • Le ci-dessus devrait fonctionner...
    • Oui il l'a fait. est-ce cross-browser? J'espère que c'est! Merci pour le miracle et de la créativité!
    • Essayer et revenir en arrière si le problème persiste..
    • il ne fonctionne pas à l'opéra.
    • opera version ?
    • il convient de opera 9.2+ et au-dessus

    InformationsquelleAutor shubhraj
  2. 3

    Veuillez vous référer à cette démo en live.. Démo.

    HTML

        <div>
        Select
        <ul>
            <li><a id="first" href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </div>

    css

      div { 
        margin: 10px;
        padding: 10px; 
        border: 2px solid purple; 
        width: 200px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    #first{
        font-size:25px;

    }
    div > ul { display: none; }
    div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
    div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
    div:hover > ul > li:hover { background: white;}
    div:hover > ul > li:hover > a { color: red; }
    • salut, merci. mais im de la modification d'une option de balise en balise select, pas de li ul.
    • Ok..heureux de vous aider ami ! 😉 Et aussi, vous pouvez accepter la réponse
    InformationsquelleAutor Amila Iddamalgoda
  3. 3

    CSS 

     <style>


 select{
          width: 150px;
          height: 30px;
          padding: 5px;
         font-size:12px;
        }
        select option { color: black; }
        select option:first-child
        {
          color: green;
          font-size:25px;
        }
        </style>

    HTML

      <select>
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
    <option>item4</option>
    <option>item5</option>
    </select>

    Démo

    • dans la démo, seule la couleur a changé pour la première option, pas la taille. toutes les options de taille de police sont les mêmes dans google Chrome.
    • Même expérience que @bonjour - couleurs varient, mais une taille de police tout de même
    InformationsquelleAutor Ankur Bhadania
  4. 2

    vous pouvez le faire en utilisant le CSS du premier enfant.

    Remarque: Ne fonctionne pas dans le navigateur webkit. Changer la structure de ul > li.

    Voici la démo

    select {
  font-size: 12px
}
select option:first-child {
  font-size: 25px
}
    • Je suis en utilisant google Chrome, toutes option polices de caractères ont la même taille.
    • ouais! sa ne fonctionne pas sur chrome. C'est un problème connu dans le navigateur webkit. Je vous suggère de modifier la structure ul > li.
    • Cela devrait être la réponse.
    InformationsquelleAutor Tushar
  5. 1

    Vous souhaitez ajouter un id à la balise d'option comme ceci:

    <option id="newFont">Some option</option>

    Et puis dans le css:

    option {
font-size: 12px;
}

option#newFont{
font-size: 25px;
}
    • essayé, pas de travail pour moi. peut-être que vous pouvez m'aider via jsfiddle pour que je puisse voir? merci pour l'aide!
    • Vous avez raison! Je ne devrais pas assumer. J'ai été à la recherche à d'autres threads, et il semble que l'utilisation de la select option[val="1"] sélecteur fonctionne sur les navigateurs plus anciens, mais pas dans la version la plus récente de google Chrome (qui est ce que j'utilise). Je vais continuer à chercher une solution!
    InformationsquelleAutor Joshua Terrill
  6. 1

    utiliser les css

    html 

    <select id="yourSelect">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

    css

     <style>
 #yourSelect > option:first-child
 {
   font-size: 25px;
 }
 </style>

    ou par jquery

    jquery

    jQuery("#yourSelect option:first-child").css('font-size', '25px');
    InformationsquelleAutor chriz
  7. 1

    je vais réfléchir à deux fois pour faire des comme ça à cause de navigateur limitation. Faire vérifier ici :

    http://www.electrictoolbox.com/style-select-optgroup-options-css/

    • c'est pourquoi je demande si il y a un jquery solution, si css ne sera pas en mesure de le faire
    • avez-vous essayé de jQuery façon ?
    InformationsquelleAutor airi
  8. 0
    $('select').find('option').eq(0).css({font-size: '25px'});
    InformationsquelleAutor Kyo
  9. 0
    //#target = your select box id 
//fontSize = your  font size;

$("#target option:first").css('font-size', fontSize);
    • ce qui est mal à cela ?
    • -1 Absolument rien...mais c'est un sacré solution pour utiliser jquery pour quelque chose qui peut être réalisé avec des css
    • mais -1 pour ce justifié ? sa a été un jquery solution
    • Un affreux solution pour utiliser jQuery? La question est de savoir ce que ceci Peut être réalisé grâce à CSS ou JQuery?'
    • C'est la question "Peut-il être atteint par le biais de CSS ou JQuery? "Et à mon avis (comme je l'ai dit), la réponse est valide, MAIS j'ai encore le droit de voter sur la meilleure réponse, et c'est exactement ce que j'ai fait
    • mais jQuery solution n'est pas mal non plus !
    • Je n'aurais pas de -1 sur les bonnes solutions en fonction de vos préférences. Dans le contexte de la façon dont la question est formulée, la solution peut être mise en œuvre à la fois via CSS et jQuery.
    • Je n'ai pas dit que c'était mal...je l'ai dit horrible...parce que votre ajout inutile d'exécution de script dans le navigateur, plus les dépendances entre les scripts et html (pour ne pas mentionner que vous appelez l'élément par son nom) et, essentiellement, il ressemble à un hack, pas une solution. Ce qui ne l'est toujours pas clair? Pourquoi dois-je défendre mon droit de vote de quelque chose?

    InformationsquelleAutor Dimag Kharab