CODEWITHSUNDEEP
htmlcssselectsize
user3565412
user3565412

Reputation: 91

html select size or height do not work on mobile browsers

A simple code:

<select size=5 style='height:100px;'>
<option value='1'>one</option>
<option value='2'>two</option>
</select>

Desktop browsers will show a 100px height list with 2 visible elements. Chrome and Safari for iPad show a drop-down list with no visible elements. I have found in google some discussions about it, they are from 2010 and without a solution - they say that this does not break w3c specifications. I can agree that it was ok for old little 320x240 smartphones. Is it still not working on modern 10" 2160x1620 iPads?

Upvotes: 3

Views: 2300

Answers (1)

hannon qaoud
hannon qaoud

Reputation: 79

This is a known bug in webkit browsers.

The simplest way to get it to work just how you like it in Chrome and Safari would be to manually specify the styling the select itself.

select {
  height: 54px;
  font-size: 14px;
}
<select size="3">
  <option value="">Default</option>
  <option value="1">op1</option>
  <option value="2">op2</option>
  <option value="3">op3</option>
</select>

Upvotes: 1

Related Questions