Aquí hay tres soluciones:
Solución # 1 - apariencia: ninguna - con Internet Explorer 10 - 11 solución alternativa ( Demo )
-
Para ocultar la flecha predeterminada establecida appearance: noneen el elemento de selección, luego agregue su propia flecha personalizada conbackground-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
Soporte de navegador:
appearance: nonetiene muy buena compatibilidad con el navegador ( caniuse ), excepto Internet Explorer 11 (y posterior) y Firefox 34 (y posterior).
Podemos mejorar esta técnica y agregar soporte para Internet Explorer 10 e Internet Explorer 11 agregando
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
Si Internet Explorer 9 es una preocupación, no tenemos forma de eliminar la flecha predeterminada (lo que significaría que ahora tendríamos dos flechas), pero podríamos usar un selector de Internet Explorer 9 original.
Al menos para deshacer nuestra flecha personalizada, dejando intacta la flecha de selección predeterminada.
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
Todos juntos:
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
}
}
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
Esta solución es fácil y tiene un buen soporte para el navegador, generalmente debería ser suficiente.
Si es necesario el soporte del navegador para Internet Explorer 9 (y posterior) y Firefox 34 (y posterior), siga leyendo ...
Solución # 2 Truncar el elemento de selección para ocultar la flecha predeterminada ( demo )
-
(Leer más aquí)
Envuelva el selectelemento en un div con un ancho fijo y overflow:hidden.
Luego dele al selectelemento un ancho de aproximadamente 20 píxeles mayor que el div .
El resultado es que la flecha desplegable predeterminada del selectelemento estará oculta (debido a que está overflow:hiddenen el contenedor), y puede colocar cualquier imagen de fondo que desee en el lado derecho del div.
La ventaja de este enfoque es que es un navegador cruzado (Internet Explorer 8 y posterior, WebKit y Gecko ). Sin embargo, la desventaja de este enfoque es que el menú desplegable de opciones sobresale en el lado derecho (por los 20 píxeles que ocultamos ... porque los elementos de opción toman el ancho del elemento seleccionado).
[Sin embargo, debe tenerse en cuenta que si el elemento de selección personalizado es necesario solo para dispositivos móviles, entonces el problema anterior no se aplica, debido a la forma en que cada teléfono abre de forma nativa el elemento de selección. Entonces, para dispositivos móviles, esta puede ser la mejor solución.]
.styled select {
background: transparent;
width: 150px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
}
.styled {
margin: 50px;
width: 120px;
height: 34px;
border: 1px solid #111;
border-radius: 3px;
overflow: hidden;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}
<div class="styled">
<select>
<option>Pineapples</option>
<option selected>Apples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
</div>
Si la flecha personalizada es necesaria en Firefox, antes de la Versión 35 , pero no necesita admitir versiones antiguas de Internet Explorer, siga leyendo ...
Solución # 3 - Use la pointer-eventspropiedad ( demo )
-
(Leer más aquí)
La idea aquí es superponer un elemento sobre la flecha desplegable nativa (para crear uno personalizado) y luego no permitir eventos de puntero en él.
Ventaja: Funciona bien en WebKit y Gecko. También se ve bien (sin optionelementos sobresalientes ).
Desventaja: Internet Explorer (Internet Explorer 10 y versiones anteriores) no es compatible pointer-events, lo que significa que no puede hacer clic en la flecha personalizada. Además, otra desventaja (obvia) con este método es que no puede orientar su nueva imagen de flecha con un efecto de desplazamiento o cursor de mano, ¡porque acabamos de deshabilitar los eventos de puntero en ellos!
Sin embargo, con este método puede usar Modernizer o comentarios condicionales para hacer que Internet Explorer vuelva al estándar integrado en la flecha.
NB: Siendo que Internet Explorer 10 ya no es compatible conditional comments: si desea utilizar este enfoque, probablemente debería utilizar Modernizr . Sin embargo, aún es posible excluir el CSS de puntero-eventos de Internet Explorer 10 con un hack CSS descrito aquí .
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646E;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #DDD8DC;
background: #FFF;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}
<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<span class="fancyArrow"></span>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->