Select2

¿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.

Manejando estilos en SELECT2
Manejando estilos en SELECT2

¿Como integrar SELECT2 en mi proyecto?

Para integrar correctamente SELECT2 debemos de agregar lo siguiente:

Publicaciones relacionadas
  • 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>
Cambiar tamaño de texto de la opción seleccionada en select2
Cambiar tamaño de texto de la opción seleccionada en select2

¿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 agregando clase css
Personalizar tamaño agregando clase css

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.

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad