Cambiar el color y la apariencia de la flecha desplegable

Quiero cambiar la apariencia predeterminada de la flecha de una lista desplegable para que se vea igual en todos los navegadores. ¿Hay alguna manera de anular la apariencia predeterminada de la flecha desplegable mediante CSS o de otro modo?

Puedes lograr esto con CSS, pero técnicamente no estás cambiando la flecha.

En este ejemplo, en realidad estoy ocultando la flecha predeterminada y mostrando mi propia flecha.

HTML:

CSS:

 .styleSelect select { background: transparent; width: 168px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 0; height: 34px; -webkit-appearance: none; color: #000; } .styleSelect { width: 140px; height: 34px; overflow: hidden; background: url("images/downArrow.png") no-repeat right #fff; border: 2px solid #000; } 

No, la optimización de formularios entre navegadores es muy difícil, si no imposible, para todos los navegadores. Si realmente te importa la apariencia de esos widgets, debes usar una implementación de javascript.

vea http://www.456bereastreet.com/archive/200409/styling_form_controls/ y http://developer.yahoo.com/yui/examples/button/btn_example07.html

Se puede hacer por:

 select{ background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%; } 
 select{ background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%; -moz-appearance: none; -webkit-appearance: none; -webkit-border-radius: 0px; appearance: none; outline-width: 0; padding: 10px 10px 10px 5px; display: block; width: 10em; border: none; font-size: 1rem; border-bottom: 1px solid #757575; } 
 

El elemento es generado por la aplicación y el estilo no es parte de la especificación CSS / HTML.

Tendría que falsificarlo con su propio DIV y superponerlo sobre el existente, o construir su propio control emulando la misma funcionalidad.

No, no puedes hacerlo usando un actual, pero hay técnicas que te permiten “reemplazarlas” con soluciones de javascript que se ven mejor.

Aquí hay un buen artículo sobre el tema: Algo nuevo

No es fácil de hacer, tengo miedo. El problema es que Css no puede reemplazar la flecha en una selección, ya que el navegador la representa. Pero puede construir un nuevo control desde div y elementos de entrada y Javascript para realizar la misma función que la selección.

Intente buscar algunos de los complementos de autocompletar para Jquery, por ejemplo.

De lo contrario, hay alguna información sobre el elemento de selección aquí:

http://www.devarticles.com/c/a/Web-Style-Sheets/Taming-the-Select/

A menos que planee crear su propia lista desplegable (y no use una lista desplegable de biblioteca estándar), está atascado. El aspecto del control DDL se basará en el sistema que está ejecutando y / o en el navegador que está emitiendo el resultado.

Hemos utilizado YUI, Chosen, y actualmente estamos utilizando el complemento jQuery Select2: https://select2.github.io/

Es bastante robusto, la flecha es solo la punta del iceberg.

Tan pronto como las selecciones estilizadas se conviertan en un requisito, estoy de acuerdo con las demás, vaya con un complemento. No te mates reinventando la rueda.

Intente cambiar el color de su atributo “border-top” a blanco