A todo el mundo le gusta entrar en una página web atractiva y donde el diseño es agradable a la experiencia de usuario. Además, hay detalles que marcan la diferencia a la hora de navegar en una web y una de ellas tiene que ver con esos detalles que hacen que la web sea especial.
Profundizando en estos detalles, hay una parte en la que ya podemos tener un mayor control: los selects personalizados. Ya puedes customizar con HTML y CSS cualquier select o desplegable que tengas en tu proyecto web y así hacerlo más atractivo. Las principales características son:
- Se puede personalizar todo dentro del select
- Se puede integrar todo el código HTML que se quiera
En el siguiente vídeo, Sergio Jiménez, uno de los profesores de nuestro bootcamp, explica un ejemplo de select personalizado en el que muestra algunos de los ítems que se pueden personalizar.
Aceptar el consentimiento para ver esto
Avanzando un poco en el vídeo, vemos que Sergio lleva a cabo un ejemplo de un select personalizado en el que realiza estilos para navegadores sin compatibilidad con appearance: base-select usando el siguiente código:
.custom-select {
/* Estilos para navegadores sin compatibilidad con appearance: base-select */
appearance: none;
cursor: pointer;
border-radius: 0.6rem;
border: 0.0625rem solid darkslategrey;
box-shadow: 0 0 3px darkslategrey;
color: white;
padding-block: 0.5rem;
padding-inline: 1rem 2.5rem;
background:
darkslategrey url('caret-down.svg') right 0.625rem center / 1.5rem no-repeat;
}
Por otro lado, para navegadores compatibles con appearance: base-select existen numerosas opciones, como añadir una transición al abrir y cerrar el select, estilar las opciones o cambiar el icono del picker y animarlo. Lo que lleva a cabo Sergio está recogido en el siguiente código:
.custom-select {
/* Estilos para navegadores con compatibilidad con appearance: base-select */
@supports (appearance: base-select) {
background-image: none;
padding-inline: 1rem;
display: flex;
align-items: center;
&,
&::picker(select) {
appearance: base-select;
min-width: 14rem;
border-radius: 0.6rem;
border: 0.0625rem solid darkslategrey;
box-shadow: 0 0 3px darkslategrey;
}
&::picker(select) {
margin-block-start: 0.1875rem;
opacity: 0;
height: 0;
overflow: clip;
transition:
height 0.5s ease-out,
opacity 0.5s ease-out,
overlay 0.5s,
display 0.5s;
transition-behavior: allow-discrete;
}
&:open::picker(select) {
opacity: 1;
height: calc-size(auto, size);
@starting-style {
opacity: 0;
height: 0;
}
}
&::picker-icon {
content: '';
width: 1.5rem;
aspect-ratio: 1;
background-image: url('caret-down.svg');
background-size: cover;
translate: 0.3125rem;
transition: transform 0.2s ease-out;
}
&:open::picker-icon {
transform: rotateX(180deg);
}
option {
background-color: lightcyan;
padding: 0.5rem 1rem;
transition: background-color 0.3s ease-out, color 0.3s ease-out;
&::checkmark {
/* content: '✅'; */
display: none;
}
&:hover,
&:checked {
background-color: darkcyan;
color: white;
}
}
}
}
Esperamos que te haya sido de ayuda aprender cómo crear selects personalizados y recuerda que si quieres saber más sobre HTML, CSS y convertirte en profesional del desarrollo de software, echa un vistazo a nuestro Bootcamp Full Stack Web Developer y empieza tu carrera en el mundo de la programación.
