Disable wheel selector on iOS Safari?

Issue

What is the easiest way to disable the wheel selector that appears on mobile Safari when a user activates a <select> element?

I have styled the <select> and <option> elements myself, and I would prefer that the user interacts directly, rather than with the scroll supplied by the browser.

Solution

Generally speaking you could probably preventDefault() on click and touch events on the <select>, however it's not clear how you would then make it actually usable. So, you may want to avoid using a select element at all once you detect an iOS device.

You could employ some widget collection such as this one. It can be used to implement dropdown menus or any other kind of menu, and does not open the big wheel thing on the bottom.

Answered By - Steven Lu