web-dev-qa-db-fra.com

Comment puis-je changer la taille de la police d'une option de sélection?

J'essaye de dénommer une liste déroulante d'options de sélection. Est-il possible de différencier les tailles de police des options de la valeur par défaut? Par exemple, la valeur par défaut:

-- Select Country --

Serait de taille 7 pt; et l'une des options,

Georgia

Serait taille 13pt.

Voici ma liste déroulante:

.select_join {
  width: 170px;
  height: 28px;
  overflow: hidden;
  background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;
  border: #FEFEFE 1px solid;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
  box-shadow: inset 0px 0px 10px 1px #FEFEFE;
}
.select_join select {
  background: transparent;
  width: 170px;
  font-size:7pt;
  color:grey;
  border: 0;
  border-radius: 0;
  height: 28px;
  -webkit-appearance: none;
}
.select_join select:focus {
  outline: none;
}
<div style="background-color:pink;height:150px; text-align:center;">
  <br/>
  <div class="select_join" style="margin-left:15px">
    <select name="txtCountry">
      <option>-- Select Country --</option>
      <option value="1">Georgia</option>
      <option value="2">Afghanistan</option>
    </select>
  </div>
</div>

Voir aussi ma démo sur JSFiddle .

Malheureusement, cela ne fonctionne que sur Firefox. Se pourrait-il que d'autres navigateurs ne prennent pas en charge le style des éléments <option>?

Navigateurs sur lesquels j'ai testé:

  • Chrome: version 27.0.1453.116 m
  • IE: 10
  • Firefox: 22.0
csscss3html-selectfont-size
15
user1128331

Ajoutez une classe CSS à la balise <option> pour la styler: http://jsfiddle.net/Ahreu/ ​​

Actuellement, les navigateurs WebKit ne prennent pas en charge ce comportement, car il n’est pas défini par la spécification. Jetez un oeil à ceci: Comment styliser l'élément option d'une balise select?

13
Atropo

C'est faisable mais délicat.

Les menus déroulants de sélection normaux n'acceptent pas les styles. MAIS. S'il y a un paramètre "taille" dans la balise, presque tous les CSS s'appliqueront. En utilisant cette astuce, j'ai créé un violon qui est pratiquement équivalent à une balise de sélection normale. En outre, la valeur peut être modifiée manuellement comme une ComboBox dans les langages visuels (à moins que vous ne mettiez en lecture seule dans la balise d'entrée).

Voici donc un exemple minimal pour comprendre le principe de base:
(vous aurez besoin de jQuery pour le mécanisme de clic)}:

<style>

    /* only these 2 lines are truly required */
    .stylish span {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

    /* now you can style the hell out of them */
    .stylish input    { ... }
    .stylish select   { ... }
    .stylish option   { ... }
    .stylish optgroup { ... }

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)">
        <br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="gandalf">Gandalf</option>
            <option value="harry">Harry Potter</option>
            <option value="jon">Jon Snow</option>

            <optgroup label="Comics"></optgroup>
            <option value="tony">Tony Stark</option>
            <option value="steve">Steven Rogers</option>
            <option value="natasha">Natasha Romanova</option>

        </select>
    </span>
</div>

Voici le violon avec quelques autres styles (en fait trop):

https://jsfiddle.net/7ac9us70/1052/

(Encore une fois, il est bourré de dégradés et d'effets juste pour illustrer les possibilités. Je veux dire, je ne vous dis pas d'utiliser un dégradé radial pour les groupes, ni pour les éléments en vol stationnaire! J'ai un cœur!)} _

Notez que les balises <optgroup> n'encapsulent pas les options appartenant à elles comme elles le devraient normalement; oui c'est intentionnel, c'est pour le style (la manière bien maniée serait beaucoup moins stylée). Et oui, ils fonctionnent parfaitement bien de cette façon.

15
dkellner

Dire l'élément optionnel d'être 13pt

select option{
    font-size: 13pt;
}

puis l'élément d'option first à 7pt

select option:first-child {
    font-size: 7pt;
}

Lancer la démo: http://jsfiddle.net/VggvD/1/

4
Andrea Ligios
select[value="value"]{
   background-color: red;
   padding: 3px;
   font-weight:bold;
}
0
Benito Esteban

vérifier ce violon,

je viens d'éditer le violon ci-dessus, son fonctionnement

http://jsfiddle.net/narensrinivasans/FpNxn/1/

.selectDefault, .selectDiv option
{
    font-family:arial;
    font-size:12px;
}
0
Naren Srinivasan S