5

In my responsive web app, select option font size gets auto resized in iPad resulting each option text to have inconsistent font size. (screenshot from iOS12 iPad simulator)

enter image description here

I did research and tried everything that I came across:

  • -webkit-text-size-adjust: 100% (to body)
  • -webkit-appearance: none (to select)
  • Wrap <option>s with <optgroup>
  • set font-size of select to 16px in CSS

But none of them seemed to do anything.

<select>
  <option value="None"></option>
  <option value="1">Lorem ipsummmm sitamet consectetur</option>
  <option value="2">Adipisc elitsed eiusmod</option>
</select>

body {
  -webkit-text-size-adjust: 100%;
}

select {
  font-size: 16px;
}

Here's jsFiddle

What I want to achieve is for the font size to be the same size regardless of option text length, if it's ever possible.

shibalink
  • 139
  • 2
  • 3
  • 9

1 Answers1

0

Adding font-size: 100% to the body will fix this issue. This is caused because of the auto adjust in option values that are different due to length

Yogeswar
  • 19
  • 3