La W3C define los <select> como “un elemento para crear listados desplegables”. Estos contienen etiquetas <option> que definen los elementos disponibles de una lista y son soportados por todos los navegadores.
Primero vamos a crear un select simple
Pueden ver que he creado el select dentro de un div con la clase SelectStyle que mas adelante explicare.
Y ahora los estilos CSS
.SelectStyle {
width: 220px;
position: relative;
}
select {
width: 100%;
background: #F3F3F3;
color: #585757;
padding: 5px;
font-size: 13px;
line-height: 100%;
border: 1px solid #C1C1C1;
border-radius: 0;
height: 30px;
-webkit-appearance: none;
}
option {
padding: 10px;
}
Ya tenemos nuestro select mejorado, pero aún podemos llegar a mas.
Ocultemos esa molesta flecha que nos coloca el navegador por defecto agregando a los estilos un .SelectStyle:after y aquí es donde entra nuestro div SelectStyle anterior.
.SelectStyle:after {
width: 30px;
height: 30px;
display: block;
content: '';
position: absolute;
top: 0;right: 0;
pointer-events: none;
border: 1px solid #C1C1C1;
background:#ebebeb;
background-image: url('http://www.ideup.com/sites/all/themes/ideup/img/bullet--arrow--down.gif');
background-image: url('http://www.ideup.com/sites/all/themes/ideup/img/bullet--arrow--down.gif'), -moz-linear-gradient(top,#dfdfdf 0%,#f6f6f6 100%);
background-image: url('http://www.ideup.com/sites/all/themes/ideup/img/bullet--arrow--down.gif'), -webkit-gradient(linear,left top,left bottom,color-stop(0%,#dfdfdf),color-stop(100%,#f6f6f6));
background-image: url('http://www.ideup.com/sites/all/themes/ideup/img/bullet--arrow--down.gif'), -webkit-linear-gradient(top,#dfdfdf 0%,#f6f6f6 100%);
background-image: url('http://www.ideup.com/sites/all/themes/ideup/img/bullet--arrow--down.gif'), -o-linear-gradient(top,#dfdfdf 0%,#f6f6f6 100%);
background-image: url('http://www.ideup.com/sites/all/themes/ideup/img/bullet--arrow--down.gif'), -ms-linear-gradient(top,#dfdfdf 0%,#f6f6f6 100%);
background-image: url('http://www.ideup.com/sites/all/themes/ideup/img/bullet--arrow--down.gif'), linear-gradient(top,#dfdfdf 0%,#f6f6f6 100%);
background-repeat: no-repeat;
background-position: center center;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
Y... ¡ya lo tenemos!
Es importante tener en cuenta los siguientes puntos:
- La altura del :after es la misma del contenedor, para que el border no afecta a la caja se ha utilizado la propiedad ‘box-sizing: border-box;’.
- Para que tenga interacción nuestro :after, se ha colocado la propiedad ‘pointer-events: none;’.