Размер раскрывающегося списка Firefox не отображается

Мне нужно увеличить шрифт для <option> списка <select>. Хотя это легко работает в Chrome, в Firefox единственное, что увеличивается, это выбранный вариант. Моя версия Firefox - 50.1.0

Ссылаясь на эту скрипту, я получаю следующие различные результаты:

Firefox:

Chrome:

select {
  font-size: 200%;
}

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Ответ 1

После небольшого отслеживания я вижу, что некоторые люди сообщили об этой проблеме в более новых версиях Firefox. Я сам использую версию разработки, и у меня такая же проблема, как и вы.

Эта статья ребятами в Mozilla довольно интересна в этом отношении.

Здесь есть раздел по стилю выбора окна над несколькими браузерами/устройствами, но ваши варианты выглядят тонко.

Обычно атрибуты CSS, такие как -moz-appearance: none, могут помочь, но в этом случае я не вижу работы, я видел сообщения об этом, являющемся ошибкой в новых версиях Firefox, поэтому пальцы скрестили его в скором будущем. Удачи!

Ответ 2

Это ошибка в Firefox, но она до сих пор не исправлена.

Они сказали, что это было решено, но проблема все еще существует.

Отключите Multi-Process, и он будет работать нормально.

Как отключить Multi-Process: (из LINK):

Перейти к: конфигурации. Поиск "browser.tabs.remote.autostart". Там может быть несколько результатов. Установите для них значение false и перезапустите браузер.

Ссылка на ошибку:

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

Ответ 3

UPDATE

Я забыл полностью объяснить метод, лежащий в основе моего безумия, просто потому, что я не был на 100% уверен, что мои решения будут работать из-за какой-то малоизвестной ошибки, возникающей на некоторых Маках на полнолуние (как вы можете сказать, я использую ПК и ревнив к графике Mac.)

Думал, что у вас есть Mac, я плохой. Несмотря на это, решения работают.

При работе со шрифтами и наследованием мы можем, естественно, предположить, что у нас есть наследование body {font-size:16px;}, которое будет каскадироваться до остальных элементов, таких как удобное одеяло 16px ко всему. Элементы формы игнорируются и по умолчанию не наследуют свойства шрифта по умолчанию. Мы можем исправить это следующим образом:

Использование значения inherit, как в случае с исправлением 1 или...
... наследовать от родителя, как в файле fix 2 или...
... прямо как в файле fix.

В этом фрагменте есть 3 исправления, и один из них, надеюсь, будет работать на вас.

SNIPPET

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>

Ответ 4

Это не работает в Firefox 66