<select> STYLE CSS

1.Anular estilos por defecto I

Tenemos que anular los estilos por defecto que tienen los navegadores de <select> .

select {
     background: transparent;
     border: none;
     height: 30px;
     padding: 5px;
     width: 250px;
  }

1.Anular estilos por defecto II

Tenemos que anular los estilos por defecto que tienen los navegadores de <select> .

select:focus{ outline: none;}
/* elimina la "sombra" azulada que aparece en Google Chrome */

2.Boton del <select>

El boton que despliega los ditintos <option> de select no se puede configurar. Lo tapamos encajando nuestro <select> en un div más pequeño que su tamaño.

.caja {
     margin:20px auto;        
     border:1px solid #d9d9d9;
     height:30px;
     width: 230px;
     overflow: hidden;
     position:relative;
  }

3.Construimos nuevo boton

Construimos el nuevo botón usando el  pseudoelemento ::after.

.caja::after{
     content:"\025be";/* puede ser lo que queramos */
     display:table-cell;
     text-align:center;
     padding-top:7px;
     width:30px;
     height:30px;
     background-color:#d9d9d9;
     position:absolute;
     top:0;
     right:0px;
     pointer-events: none;
  }

Para más slides sobre CSS:

https://bermartinv.github.io/css/files/taller/menu_taller.html