Cómo cambiar el background del cuadro Seleccionar sin perder la flecha derecha en Safari mobile

Necesito cambiar el background de mi casilla de selección a un color plano, pero no quiero que la flecha derecha (también conocida como la flecha desplegable) se vaya.

Yo he tratado:

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

Esto funciona para todos los browseres, excepto Safari en mi iPhone 4s con iOS 7. En este browser desaparece la flecha derecha y no está claro para el usuario que es un cuadro de selección.

Omitir -webkit-appearance no ayuda.

No quiero hacer una flecha falsa. Eso afectará a todos los demás browseres.

¿Algunas ideas?

No vas a encontrar una buena implementación de cross-browser para diseñar el elemento de selección a través de CSS. La mejor solución es crear su propio menu desplegable a través de javascript y diseñar esos elementos uniformemente en todos los browseres.

Esto es lo que hago. Al less con iOS8 funciona muy bien y se deshace de ese terrible gradiente, al time que permite que el menu desplegable se asiente sobre un background no blanco.

introduzca la descripción de la imagen aquí

Acabo de usar el background-color: white , seguido de cerca por la image.

Tuve que agregar una flecha personalizada, pero lo hice en línea en mi CSS con un PNG base64

 .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; } 

¿Qué es .uglyselect que puede solicitar? Es mi testing Modernizr para iPad

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

Puedes renombrarlo como quieras, o eliminarlo si no estás usando Modernizr. Prefiero limitarlo a iOS de esta manera, así que no tuve que probarlo en todos los browseres (y eso es lo que solicitó originalmente de todos modos). El menu desplegable pnetworkingeterminado para los browseres de escritorio era aceptable para mi layout.

(Estas configuraciones de relleno fueron optimizadas para valores numéricos y es posible que deban ajustarse para valores de text más largos).

Ligeramente diferente, pero esto funcionó constantemente para mí.

Mientras esté usando modernizr, use esto en su file de scripts:

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

Luego solo agrega los styles específicos de CSS como se menciona en otras publicaciones.

Por ejemplo:

 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; } 

Espero que ayude. Como digo, puede haber otras forms también, pero esa funcionó para mí.