¿Cómo cambiar el tamaño de fuente en SELECT2?

¿Cómo cambiar el tamaño de fuente en SELECT2?. En este articulo veremos 3 formas para modificar estilos en nuestras listas despegables usando Select2.
¿Qué es SELECT2?
Select2 es una librería JavaScript enfocado en las etiquetas SELECT del HTML que nos permite crear estilos de selección avanzados con poco código e incluso trabaja con datos dinámicos desde base de datos.

¿Como integrar SELECT2 en mi proyecto?
Para integrar correctamente SELECT2 debemos de agregar lo siguiente:
- Librería jQuery
- Librería Select2 (js, css)
- Código JavaScript para llamar a la etiqueta select
A continuación, veamos una simple integración
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<select class="select2" style="width:300px">
<option value="AL">Alemania</option>
<option value="Am">Armenia</option>
<option value="An">Antioquia</option>
<option value="Le">Letonia</option>
<option value="Mx">Mexico</option>
</select>
<script>
$(document).ready(function() {
$('.select2').select2();
});
</script>
</body>
</html>
¿Cómo cambiar el tamaño de fuente en SELECT2?
A continuación, veremos varios opciones para poder cambiar el font-size (tamaño de texto) de nuestras listas desplegables. Por lo tanto, trabajaremos con ejemplos completos.
Cambiar tamaño de texto seleccionado en etiqueta SELECT
Al momento de seleccionar una opción usando SELECT2 podemos cambiarle el atributo FONT-SIZE
de nuestra etiqueta select
. Veamos el ejemplo.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<style>
.sizeSelect
{
display:inline;
}
.sizeSelect .select2-selection__rendered
{
font-size:1.5em;
}
</style>
</head>
<body>
<div class="sizeSelect">
<select class="select2" style="width:300px">
<option value="AL">Alemania</option>
<option value="Am">Armenia</option>
<option value="An">Antioquia</option>
<option value="Le">Letonia</option>
<option value="Mx">Mexico</option>
</select>
</div>
<script>
$(document).ready(function() {
$('.select2').select2();
});
</script>
</body>
</html>

¿Como cambiar tamaño de texto de lista despegable en SELECT2?
Si deseamos cambiar el tamaño del texto en SELECT2
podemos configurar para que se agregue una clase y mediante esa clase podemos personalizar cualquier detalle incluso los tamaños de texto.
Veamos un ejemplo.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<style>
.myFontCustom{
font-size:8px;
}
</style>
</head>
<body style="padding:30px">
<select class="select3" style="width:600px">
<option value="AL">Alemania</option>
<option value="Am">Armenia</option>
<option value="An">Antioquia</option>
<option value="Le">Letonia</option>
<option value="Mx">Mexico</option>
</select>
<script>
$(document).ready(function() {
$(".select3").select2({ dropdownCssClass: "myFontCustom" });});
</script>
</body>
</html>

Personalizar tamaño de texto modificando estilos de select2
Una técnica poco tradicional es modificar los estilos que genera esta librería para dinamizar la etiqueta SELECT
. Por lo tanto, cuando le damos en inspeccionar en el navegador veremos que se han creado varias etiquetas y clases en nuestro Select
.
Si observamos con detalle encontraremos esta clase CSS .select2-results__option
que se encarga de manejar los estilos de los textos y podemos modificarlo llamando a la clase y agregando más atributos como en el siguiente ejemplo.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<style>
/*Personalizar tamaño de texto*/
.select2-results__option {
font-size: 30px;
}
</style>
</head>
<body style="padding:30px">
<div class="sizeSelect">
<select class="select4">
<option value="AL">Alemania</option>
<option value="Am">Armenia</option>
<option value="An">Antioquia</option>
<option value="Le">Letonia</option>
<option value="Mx">Mexico</option>
</select>
</div>
<script>
$(document).ready(function() {
$(".select4").select2({
width: '650px',
theme: "classic"
});
});
</script>
</body>
</html>
En resumen
En este post hemos visto 3 formas de manejar los tamaños de texto usando la librería llamada select2 para dar un aspecto profesional a nuestras etiquetas SELECT
de HTML5
Recordemos que SELECT2
nos permite realizar búsquedas dinámicas y múltiples incluso con datos desde MySQL.