Disable wheel selector on iOS Safari?

Question

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.

Answer 1

您无法在移动Safari上禁用滚轮选择器。

Answer 2

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.

Answer 3

As of 2022 this is no longer an issue. Hooray. They finally got rid of the wheel selector, In iOS Safari the select element is now a normal list. similar to Android, I've been waiting years for this issue to be addressed. the wheel selector was awful UX and is finally gone. iOS Safari is actually a good browser now.