Cambiar el color y el aspecto 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?Cambiar el color y el aspecto de la flecha desplegable

Fuente

2009-03-04 Iris

No, la compatibilidad 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.

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

Fuente

2009-03-04 17:00:26 TomHastjarjanto

en el blanco .... + 1 – repzero

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

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

Fuente

2009-03-04 17:01:26

No, no puede hacerlo utilizando un <select> real, pero hay técnicas que le permiten "reemplazarlas" con soluciones de JavaScript que se ven mejor.

He aquí un buen artículo sobre el tema: <select> Something New

Fuente

2009-03-04 17:02:32

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

Fuente

2009-03-04 17:02:50 TheTXI

No es fácil hacerlo, me temo. 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 en algunos de los complementos de autocompletar para Jquery, por ejemplo.

de lo contrario hay algo de información sobre el elemento de selección aquí:

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

Fuente

2009-03-04 17:07:57 Richard

Usted puede lograr esto con CSS, pero no va a cambiar techinically la flecha en sí.

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

HTML:

<div class="styleSelect"> 
    <select class="units"> 
    <option value="Metres">Metres</option> 
    <option value="Feet">Feet</option> 
    <option value="Fathoms">Fathoms</option> 
    </select> 
</div>

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

Fuente

2013-01-31 03:10:23 Sphvn

Esa es una buena solución, sin embargo, hay dos problemas: 1. en IE8, un fondo azul después de la selección está sobre la imagen de la flecha, 2. en Opera, la imagen de la flecha no es visib le. :( – mj82

+14

Esto fue más la intención de ser una guía en lugar de mí completar todo el trabajo para OP – Sphvn

Gracias esto es todo lo que quería. – sohaib

Hemos utilizado YUI, elegido, y actualmente está usando el plugin de jQuery Seleccionar2: https://select2.github.io/

Es bastante robusta, la flecha es Solo es 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.

Fuente

2016-01-13 01:21:13 sb333

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

<div class="styleSelect"> 
 
    <select class="units"> 
 
    <option value="Metres">Metres</option> 
 
    <option value="Feet">Feet</option> 
 
    <option value="Fathoms">Fathoms</option> 
 
    </select> 
 
</div>

Fuente

2017-03-04 16:53:40 Lambder

¿cómo se personalizaría el color con este método? – jbodily

utilizar svg de fondo diferente. – Lambder

trate de cambiar el color de su "border-top" atributo en blanco

Fuente

2017-04-27 06:46:50 Bojan

Cambiar el color y el aspecto de la flecha desplegable

Respuesta

Cuestiones relacionadas