En este pequeño tutorial te enseñare a personalizar un select con CSS de una forma rápida y sencilla sin utilizar java script. Puedes ver el resultado final aquí: Ver Demo
Recuerda que este post forma parte de una mini guía:
- Radio Buttons, Checkbox y select personalizados con CSS
- Personalizar un radio button con CSS
- Personalizar un checkbox con CSS y animarlo
- Personalizar un select con CSS
¿Cómo personalizar un select con CSS?
Con la propiedad appearance:none estamos especificando a los navegadores que no apliquen ninguna apariencia por defecto. Nos permitirá editar su CSS y apariencia.
|
1 2 3 4 5 6 |
.content-input input, .content-select select{ appearance: none; -webkit-appearance: none; -moz-appearance: none; } |
Lo segundo que haremos será incluir nuestro checkbox dentro de un <div>. En esta div también añadiremos una etiqueta <i> que utilizaremos para crear la flecha del desplegable. Este será nuestro código HMTL:
|
1 2 3 4 5 6 7 8 |
<div class="content-select"> <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> <i></i> </div> |
Código CSS
Antes de personalizar y añadir colores, debes incluir la propiedad y valor de CSS appearance: none. Si no la incluimos, cada navegador le dará al select una apariencia por defecto.
|
1 2 3 4 5 |
.content-select select{ appearance: none; -webkit-appearance: none; -moz-appearance: none; } |
Importante
Con esté código CSS eliminamos la flecha que aparece en el desplegable por defecto:
|
1 2 3 4 |
/* Eliminamos la fecha que por defecto aparece en el desplegable */ .content-select select::-ms-expand { display: none; } |
Por último, nuestro código para personalizar el select:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
.content-select{ max-width: 250px; position: relative; } .content-select select{ display: inline-block; width: 100%; cursor: pointer; padding: 7px 10px; height: 42px; outline: 0; border: 0; border-radius: 0; background: #f0f0f0; color: #7b7b7b; font-size: 1em; color: #999; font-family: 'Quicksand', sans-serif; border:2px solid rgba(0,0,0,0.2); border-radius: 12px; position: relative; transition: all 0.25s ease; } .content-select select:hover{ background: #B1E8CD; } /* Creamos la fecha que aparece a la izquierda del select. Realmente este elemento es un cuadrado que sólo tienen dos bordes con color y que giramos con transform: rotate(-45deg); */ .content-select i{ position: absolute; right: 20px; top: calc(50% - 13px); width: 16px; height: 16px; display: block; border-left:4px solid #2AC176; border-bottom:4px solid #2AC176; transform: rotate(-45deg); /* Giramos el cuadrado */ transition: all 0.25s ease; } .content-select:hover i{ margin-top: 3px; } |
Post Anteriores
