How to Change Select Box Background Without Losing The Right Arrow on Mobile Safari

How To Change Select Box Background Without Losing the Right Arrow on Mobile Safari

You are not going to find a good cross-browser implementation for styling the select element via CSS. The better solution is to create your own dropdown via javascript and style those elements uniformly across all browsers.

Dissappearing arrow and styling on select element in Safari on iOS

If you tell webkit to remove all default styling, it will remove it, also the arrow (in iOS). You will have to create a arrow and shift it over the select field.

I made this pen, include everything with .dblarrow (CSS and HTML) and add styles marked with /*Important*/.

How can I remove the gloss on a select element in Safari on Mac?

You can use this CSS property:

-webkit-appearance: none;

Note that this also causes the arrow icons to disappear. See the other answers for ways to add them back.

See http://trentwalton.com/2010/07/14/css-webkit-appearance/

Select arrow style change

Have you tried something like this:

.styled-select select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

Haven't tested, but should work.

EDIT: It looks like Firefox doesn't support this feature up until version 35 (read more here)

There is a workaround here, take a look at jsfiddle on that post.

How to override the input[type=select] text colour in IOS Safari

This type of styling is not currently supported by WebKit browsers on Mac OS X. You may find some more ideas here: Pure CSS solution to styling specific options in Webkit based browsers?.

Styling a select on iOS

The quick & easy fix is to apply -webkit-appearance: none. However, you might quickly notice your element has lost the arrow to indicate it's a <select> element.

To address this, one workaround is to wrap your element with a div and mimic the arrow using CSS content.

Here's a Fiddle: http://jsfiddle.net/d6jhpo7v/

And the fiddle in iOS simulator:

Select arrow do not appear on iphone

The -webkit-appearance: none; line is telling webkit browsers (iPhone, BB and 'droid) to not display the default <select> appearance. Removing this line will restore the arrow.

As mentioned in the comments, <select> is a real pain to style. The only realistic option if you want real control of how it looks it to use a replacement technique as mentioned by @AdamMarshal.

Alternatively, if you absolutely must use a <select> and -webkit-appearance: none;, add a background image of an arrow.

---

Related Topics