La imagen de fondo para Seleccionar (menú desplegable) no funciona en Chrome

Quiero usar una imagen para el fondo de una selección / menú desplegable. El siguiente CSS funciona bien en Firefox e IE, pero no en Chrome:

#main .drop-down-loc { width:506px; height: 30px; border: none; background-color: Transparent; background: url(images/text-field.gif) no-repeat 0 0; padding:4px; line-height: 21px;} 

 select { -webkit-appearance: none; } 

Si lo necesita, también puede agregar una imagen que contenga la flecha como parte del fondo.

Lo que Arne dijo: no se puede marcar de manera confiable las casillas de selección y hacer que se vean de forma consistente en todos los navegadores.

Uniform: https://github.com/pixelmatrix/uniform es una solución de javascript que le da un buen control gráfico sobre los elementos de su formulario; sigue siendo Javascript, pero es tan agradable como javascript para resolver este problema.

En general, se considera una mala práctica el estilo de los controles de formulario estándar porque el resultado es muy diferente en cada navegador. Ver: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/ para algunos ejemplos representados.

Dicho esto, he tenido algo de suerte haciendo que el color de fondo sea un valor RGBA:

 < !DOCTYPE html>        

Google Chrome sigue representando un degradado en la parte superior de la imagen de fondo en el color que pasa a rgba (r, g, b, 0.1), pero elegir un color que complemente su imagen y hacer que el alfa 0.1 reduzca el efecto de esto.

puede usar los estilos de CSS siguientes para todos los navegadores excepto Firefox 30

 select { background: url(dropdown_arw.png) no-repeat right center; appearance: none; -moz-appearance: none; -webkit-appearance: none; width: 90px; text-indent: 0.01px; text-overflow: ""; } 

página de demostración – http://kvijayanand.in/jquery-plugin/test.html

Actualizado

Aquí hay una solución para Firefox 30. Pequeño truco para elementos personalizados de Firefox: -moz-any () css pseudo class.

http://blog.kvijayanand.in/customize-select-arrow-css/