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

Question

I need to change the background on my select box to a flat color but I don't want the right arrow (aka the drop-down arrow) to go away.

I have tried:

select {
    -webkit-appearance: none;
    border: 0;
    background: none;
}

This works for all browsers except for Safari on my iPhone 4s with iOS 7. On this browser the right-arrow disappears and it is not clear to the user that it is a select box.

Omitting -webkit-appearance doesn't help.

I don't want to make a fake arrow. That will affect all the other browsers.

Any ideas?

Solution 1

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.

Solution 2

This is what I do. At least with iOS8 it works great and gets rid of that awful gradient, while allowing the dropdown to sit on a non white background.

I just used have background-color: white, closely followed by the image.

I did have to add a custom arrow, but I just did it inline in my css with a base64 PNG

.uglyselect & select  
{
    -webkit-appearance: none;
    background-color: white;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAJCAYAAAA/33wPAAAAvklEQVQoFY2QMQqEMBBFv7ERa/EMXkGw11K8QbDXzuN4BHv7QO6ifUgj7v4UAdlVM8Uwf+b9YZJISnlqrfEUZVlinucnBGKaJgghbiHOyLyFKIoCbdvecpyReYvo/Ma2bajrGtbaC58kCdZ1RZ7nl/4/4d5EsO/7nzl7IUtodBexMMagaRrs+06JLMvcNWmaOv2W/C/TMAyD58dxROgSmvxFFMdxoOs6lliWBXEcuzokXRbRoJRyvqqqQvye+QDMDz1D6yuj9wAAAABJRU5ErkJggg==);
    background-position : right center;
    background-repeat: no-repeat;
    padding-right: 1.5em;
}

What is .uglyselect you may ask? It's my Modernizr test for iPad

 Modernizr.addTest('uglyselect', function ()
 {
     return navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false;
 });

You can rename it as you please - or remove it if you're not using Modernizr. I prefer to limit it to iOS in this way so I didn't have to test it across all browsers (and that's what you originally requested anyway). The default dropdown for desktop browsers was acceptable for my design.

(These padding settings were optimized for numeric values and may need to be tweaked for longer text values).

Solution 3

Slightly different, but this worked consistently for me.

As long as you're using modernizr, use this in your scripts file:

jQuery(function ($) {
    if (navigator.userAgent.match('iPad|iPhone|iPod') != -1 ) {
        $('select').addClass('iOSselect'); // provide a class for iOS select box
    }
});

Then you just add the specific CSS styles as mentioned in other posts.

For example:

select.iOSselect {
    -webkit-appearance: none;
    background-color: white;
    background-image: url('images/iOS-select-arrow');
    background-position : right center;
    background-repeat: no-repeat;
    padding-right: 1.5em;
}

Hope that helps. Like I say, there may be other ways too, but that one worked for me.

Comments

[Guillaume Bois]

Dropdowns styling on iOS sucks. Apple WAKE UP! We are in 2017! We would like to be able to style drodowns like we can everywhere else.

[aruno]

You can make your own icon and find a base64 image encoder to create the image data

[Guillaume Bois]

I've got to make a theme that works on many different sites, which have (possibly) their own background color. So I am looking for a solution with no image generation. I will try a Select2 solution instead.

[jinglesthula]

For my case, I decided I was ok with the gradient. I found that setting a background-color on the select did allow it to show through slightly, so I used the modernizr test and simply provided very bold versions of the colors for required, dirty, validation-error that I needed until they looked like other fields in those same states. Not what OP is looking for, but may be acceptable for some.