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?
Asked
Active
Viewed 1.8k times
8
-
1Kieran and Pat Fowler, your answers look good. I didn't know which answer, if any, to award the bounty to. I would really like to have something that works on desktop browsers, which neither the cubiq thing nor Mobiscroll do. For now, I am using this jQuery plugin (http://www.bulgaria-web-developers.com/projects/javascript/selectbox/) but I am keeping my eyes open in case something better comes up. – Elias Zamaria May 12 '11 at 22:17
4 Answers
9
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..
Kieran
- 17,572
- 7
- 45
- 53
-
Amazing. Some developers are really willing to go the extra mile to improve the user experience of iOS web apps. – Tobias Cohen May 11 '11 at 02:11
-
what i find amazing is that there are people out there kicking ass and taking names putting these scripts out there for free. – Kieran May 11 '11 at 02:17
-
5
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.
Robert
- 21,110
- 9
- 55
- 65
-
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. – Linda Sep 27 '10 at 12:50
5
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.
Patrick Fowler
- 176
- 4
- 13
2
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)
Jawad
- 8,352
- 10
- 40
- 45