How To Change Select Box Background Without Losing

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?

Answer 1

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).

Answer 2

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.

Answer 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.