Menú desplegable de selección de estilo en CSS

1. Utilice appearance:none para ocultar la flecha predeterminada y establecer una flecha personalizada en el menú desplegable Seleccionar en CSS
2. Utilice overflow:hidden para ocultar la flecha predeterminada y establecer una flecha personalizada en el menú desplegable Seleccionar en CSS

En este artículo, presentaremos algunos métodos para diseñar el menú desplegable de selección en CSS.

Utilice appearance:none para ocultar la flecha predeterminada y establecer una flecha personalizada en el menú desplegable Seleccionar en CSS

Podemos diseñar el menú desplegable de selección usando solo CSS ocultando el conjunto de flechas predeterminado y agregando un conjunto de flechas personalizado. Existe una propiedad CSS appearance que define el estilo de un elemento en función del sistema operativo. Los estilos aplicados con la propiedad appearance serán nativos de la plataforma. Podemos usar esta propiedad en la etiqueta select y definir la flecha en el menú desplegable. La opción none en la propiedad appearance ocultará la flecha predeterminada del menú desplegable. Luego, podemos cargar nuestra flecha personalizada. Podemos utilizar las propiedades -webkit-appearance y -moz-appearance en los navegadores basados ​​en WebKit y Blink.

Por ejemplo, cree una lista desplegable utilizando las etiquetas select y option en HTML. Escriba las opciones de su elección. En CSS, seleccione la etiqueta select y establezca las diferentes propiedades como margin, width, height, padding, font-size, border. A continuación, utilice la propiedad appearance y establézcala en none. Luego, use la propiedad abreviada background para establecer la flecha personalizada. Utilice la función url() para seleccionar la imagen. Diseñe la imagen con propiedades como background-repeat, background-size y background-color. Utilice la opción no-repeat para mostrar la imagen una vez. Establezca la posición en 100% y el tamaño de fondo en 15%.

Por lo tanto, diseñamos un menú desplegable usando CSS.

Código de ejemplo:

<select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
</select>

select {
 margin: 40px;
 width: 160px;
 padding: 4px 30px 4px 4px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 30px;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}

Utilice overflow:hidden para ocultar la flecha predeterminada y establecer una flecha personalizada en el menú desplegable Seleccionar en CSS

Podemos envolver la etiqueta select con un div y establecer su overflow en hidden para ocultar la flecha predeterminada en el menú desplegable. Luego, podemos agregar nuestra flecha personalizada, lo mismo que el primer método. La propiedad overflow establecida a hidden recortará el desbordamiento en el contenedor. El resto del contenido estará oculto. Definiremos el ancho del div menor que el del menú desplegable. Entonces, la flecha en el menú desplegable caerá fuera del contenedor cuando se usa el valor hidden en la propiedad overflow. Finalmente, podemos agregar nuestra flecha personalizada.

Por ejemplo, cree un div con la clase menu. Dentro del div, escriba los mismos elementos desplegables que en el primer método. En CSS, seleccione la etiqueta select que es descendiente de la clase menu como .menu select, y aplique los estilos. Establezca el background en transparent. Cree el width de 140px. Establezca font-size en 14px y cree un borde. Establezca la altura del menú en 35px. A continuación, seleccione la clase menú y dé el margen de 40px, el ancho de 125px y la altura de 34px. Asegúrese de que el ancho del recipiente sea menor que el del menú. A continuación, pon el overflow en hidden y pon la imagen de fondo como primer método.

Aquí, eliminamos la flecha predeterminada del menú desplegable y agregamos una flecha personalizada. Por lo tanto, podemos diseñar el menú desplegable de selección en CSS.

Código de ejemplo:

<div class="menu">
 <select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
 </select>
</div>

.menu select {
 background: transparent;
 width: 140px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 35px; 
} 
.menu{
 margin: 40px;
 width: 125px;
 height: 34px;
 border: 1px solid black;
 overflow: hidden;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}