iOS funky <select>

Yesterday I was ready to finish with a project for Apple when a colleague called my attention about the fact that the text on select tag could not be read on iOS.

This is a simple example of how a select tag renders on browser:

Everything works fine here, but when I try to render this on mobile, this is what I get:

Note that the default select box replacement on iOS cuts part of the text for the option on my select tag.

Obviously this is not going to work. I need users to be able to read the entire text inside of the select tag.

The solution I found was to replace the select box with a list of radio buttons and create a fake select box with JavaScript. Here it is the result:

Every time you select an option on this select box a radio button gets triggered. In mobile it is breaking the line for large texts but at least now users can read everything.

Here is the link if you want to try out: