Sunday 15 April 2012

html - How can I style a select element on an Android phone? -


I am developing a mobile website and testing both on the iPhone and Android phones. I changed the look of the selection box on the page using CSS.

It performs well in the iPhone browser, but the styles in Android have not been implemented correctly. The original dropdown arrow is present (and standing due to height property).

Is there any way to tell the browser how to put this element on an Android device? Or is it not supported?

Here is a sample of my code:

HTML:

  & lt; Div class = "filter-group" & gt; & Lt; Select class = "bigInput" id = "f_eventWho" name = "f_eventWho" tabindex = "1" & gt; & Lt; Option id = "f_public" selected = "selected" & gt; For everyone & lt; / Option & gt; & Lt; Option id = "f_private" & gt; By invitation & lt; / Option & gt; & Lt; Option id = "f_both" & gt; All galleries & lt; / Options & gt; & Lt; / Select & gt; & Lt; / Div & gt;   

CSS:

.  .bigInput {width: 125px; Height: 50px; Background size: 15px; Background: RGB (15 9, 209, 225) url (../img/ small_down_arrow_20.png) No-repetition authority; Border: None; Margin: 5 px; Font-size: 14px; }>   

There is no consistent way in the native selection box in the browser, Walk alone in mobile

I've found that the best workaround is an HTML dropdown that emulates the selectbox behavior - I choose the highly select box if you're using JQuery:

Call it $ ('select') Selectboxit (); and it replaces all the selected boxes on the page, with stylish HTML elements that behave exactly. Good luck!

No comments:

Post a Comment