web-dev-qa-db-fra.com

La taille de police de l'option de menu déroulant Firefox n'est pas rendue

J'ai besoin d'augmenter la police pour le <option> d'une liste <select>. Bien que cela fonctionne facilement dans Chrome, dans Firefox, seule l'option sélectionnée est augmentée. Ma version de Firefox est 50.1.0

En se référant à ce violon , j’obtiens les différents résultats suivants:

Firefox: Chrome result

Chrome: Firefox result 

select {
  font-size: 200%;
}
<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Je m'attends à obtenir le même comportement de Chrome également dans Firefox.

htmlcssfirefox
15
Mark

Après avoir fouillé un peu, je constate que certaines personnes ont signalé ce problème dans les nouvelles versions de Firefox. J'utilise moi-même la version de développement et j'ai le même problème que vous.

Cet article des gars de Mozilla est assez intéressant à cet égard. 

Il y a une section sur le style des boîtes de sélection sur plusieurs navigateurs/périphériques, mais vos options semblent minces. 

Normalement, des attributs CSS tels que -moz-appearance: none peuvent aider, mais dans ce cas, je ne vois pas de solution de contournement. J'ai vu des rapports selon lesquels il s'agirait d'un bogue dans les versions plus récentes de Firefox. Bonne chance!

4
Ian Taylor

Ceci est un bogue dans Firefox mais n’est toujours pas corrigé.

Ils ont dit que c'était résolu, mais le problème existe toujours.

Désactivez Multi-Process et cela fonctionnera bien.

Comment désactiver le multi-processus: (from LINK ):

Allez à propos de: config. Recherchez "browser.tabs.remote.autostart". Il peut y avoir plusieurs résultats. Définissez-les tous sur false et redémarrez le navigateur.

Lien de bogue:

https://bugzilla.mozilla.org/show_bug.cgi?id=910022

4
Hope Mystery

METTRE &AGRAVE; JOUR

J'ai négligé d'expliquer en détail la méthode derrière ma folie, simplement parce que je n'étais pas sûr à 100% que mes solutions fonctionneraient à cause d'un bogue peu connu survenant sur certains Macs à la pleine lune (comme vous pouvez le constater, j'utilise PC et je suis jaloux des Mac graphique.)

Je pensais que tu avais un Mac, mon mauvais. Quoi qu'il en soit, les solutions fonctionnent.

Lorsque nous traitons des polices et de l'héritage, nous pouvons naturellement supposer que si nous avons un body {font-size:16px;}, l'héritage se répercute en cascade sur le reste des éléments, comme une couverture confortable de 16 pixels de tout. Les éléments de formulaire sont négligés et, par défaut, n'héritent pas des propriétés de police. Nous pouvons résoudre ce problème en:

  • Utiliser la valeur inherit comme dans le correctif 1 ou ...
  • ... hériter d'un parent comme dans le correctif 2 ou ...
  • ... directement comme dans le correctif 3.

Ce fragment de code contient 3 correctifs, et l’un d’entre eux fonctionnera, espérons-le, pour vous.

EXTRAIT

html,
body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font: 600 16px/1 Verdana;
}
* {
  margin: 0;
  padding: 0;
  line-height: 1;
}
fieldset {
  padding: 10px;
  margin: 50px auto;
}
legend {
  text-align: right;
}
select {
  width: 6ex;
}
/* Fix #1
|~~~~~~~~*/

select#X {
  font-size: 2em;
}
select#X > option {
  font-size: inherit;
}
/* Fix #2
|~~~~~~~~*/

select#Y {
  font-size: 200%;
}
select#Y > option {
  font-size: 100%;
}
/* Fix #3
|~~~~~~~~*/

select#Z {
  font-size: 32px;
}
select#Z > option {
  font-size: 32px;
}
<fieldset>
  <legend>
    <h1>Font-size</h1>
    <h2>Select<br>
    Option</h2>
  </legend>

  <select id='X' name='X'>
    <option value="X">X</option>
    <option value="1">2em</option>
    <option value="2">inherit</option>
  </select>

  <select id='Y' name='Y'>
    <option value="Y">Y</option>
    <option value="1">200%</option>
    <option value="2">100%</option>
  </select>

  <select id='Z' name='Z'>
    <option value="Z">Z</option>
    <option value="1">32px</option>
    <option value="2">32px</option>
  </select>

</fieldset>

1
zer00ne