Styling <select> tag for iPhone

Question

When a <select> tag is used in a HTML page, is there a way to style the text size in the scroll wheel that shows on the iPhone?

Solution 1

I don't believe you can style the wheel that shows up on the iPhone directly. In fact, even modifying it in browsers has weird support. For example, http://jsbin.com/obake3 doesn't work at all in Chrome, only modifies the actual drop down in Safari and stretches the graphic in a very ugly way in Firefox.

Solution 2

There is this alternative.

http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch

It uses javascript to put the elements on the page.. I used it for a web/ iphone app and it worked really well. There would be custom styling if you wanted to change the default text sizes and you could also load in custom images..

Solution 3

We investigated and couldn't find any reliable way of altering the display so we looked into different libraries. We're having good luck with the Mobiscroll library for jQuery. It is a more up to date project than the cubiq project referred to in other responses.

The control is themable. You can easily change the appearance of if in CSS. It also comes with pre-defined, nice looking color schemes.

We chose it because it works across devices allowing for a more consistent look & feel.

Solution 4

Taken from Sitepoint Ref

The select renders slightly differently depending on the browser and operating system in use, and is well known as a troublesome HTML element to style with CSS (because the display is inherited from the operating system, rather than provided by the browser)

View more solutions

Comments

[Linda]

It was within the wheel that I was asking about and not on the page itself. I would like to control font-size, color and font-family.

[Tobias Cohen]

Amazing. Some developers are really willing to go the extra mile to improve the user experience of iOS web apps.

[Kieran]

what i find amazing is that there are people out there kicking ass and taking names putting these scripts out there for free.

[Kieran]

this answer is 8 years old and may no longer be relevant.