CODEWITHSUNDEEP
htmlcss
Patrick Keane
Patrick Keane

Reputation: 663

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

I am developing a mobile website and testing on both iPhone and android phone. I changed the appearance of select boxes on the page using CSS.

This displays good in the iPhone browser, but in Android does not apply the styles correctly. The original dropdown arrow remains present (and is stretched vertically due to the height property).

Is there any way of telling the browser how to style this element on a android device? Or is it not supported?

Here is a sample of my code:

HTML:

<div class="filter-group">
    <select class="bigInput" id="f_eventWho" name="f_eventWho" tabindex="1">
        <option id="f_public" selected="selected">For Everyone</option>
        <option id="f_private">By invitation</option>
        <option id="f_both">All Gatherings</option>
    </select>
</div>

CSS:

.bigInput
{width: 125px;
height: 50px;
background-size: 15px;
background: rgb(159, 209, 225) url(../img/small_down_arrow_20.png) no-repeat right;
border: none;
margin: 5px;
font-size: 14px;
}

Upvotes: 0

Views: 10506

Answers (2)

Seth Warburton
Seth Warburton

Reputation: 2413

The best solution is to not try and style select elements, especially not on mobile devices.

Doing so is both damaging to usability and performance, it's raising your middle finger to visitors and letting them know you really don't care about them at all.

Please try and justify the enormous overhead (please look at what a lib like selectBoxIt will do to page-weight) you will be adding against the benefit you will provide to visitors (which is zero, at best).

Upvotes: 2

CodeMoose
CodeMoose

Reputation: 3025

There is no consistent way to style native selectboxes in browsers, let alone in mobile.

The best workaround I've found is to create an HTML dropdown that emulates the selectbox behavior - I highly recommend SelectBoxIt if you're using JQuery: http://gregfranko.com/jquery.selectBoxIt.js/

All you have to do is call $('select').selectboxit(); and it replaces all select boxes on the page with stylable html elements that behave the exact same way. Best of luck!

Upvotes: 5

Related Questions