We have a site with a large numerical select element which is currently set up as a 'spinner' wheel of sorts but we need to change it over to a standard <select><option> type input instead. The problem is that it looks like Chrome and new versions of Safari now show the drop down options as the same font size as the select element, where as Firefox shows the dropdown in the browser-native font size, which we prefer.

This seems like a strange behavior on behalf of Chrome / Safari because they don't allow other styles to carry over to from (font, color, etc).

Here is a jsfiddle to demonstrate, you can try it in different browsers to see the different outputs.

We really want to stick with native rather than designing something custom to maintain the native mobile select interfaces of iOS Safari, Android Chrome, etc.

Any help is greatly appreciated, thanks!

.select-wrapper {
  position: relative;
  display: block;
  font-size: 16px;
}

.selectClass {
  position: relative;
  display: block;
    font-size: 96px;
    text-transform: uppercase;
}

.selectClass option {
    font-size: 16px !important;
}

.selectClass .option-5 {
    font-size: 16px !important;
}

<div class='select-wrapper'>
<select class="selectClass">
  <option value="">Option 1</option>
  <option value="">Option 2</option>
  <option value="">Option 3</option>
  <option value="">Option 4</option>
  <option class='option-5' value="">Option 5</option>
  <option value="">Option 6</option>
  <option value="">Option 7</option>
</select>
</div>