Agregar imágenes a un SELECT suele ser una tarea titánica pero es mas sencillo de lo que creemos.
¿Cómo agregar imágenes en etiqueta SELECT?
En este artículo veremos 2 formas de como podemos agregar imágenes para darle mas énfasis a nuestras etiquetas SELECT.
Aquí pondremos una lista desplegable básica en el cual podemos trabajar
<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>¿Cómo agregar imágenes en etiqueta SELECT?
Poblar SELECT con emojis
Una opción amigable y colorida es usar emojis que son aceptados por la mayoría de navegadores y se adapta muy bien dentro de un select. Podemos hacerlo con países, idiomas o monedas, etc.
Estos emojis funciona con prácticamente todos los navegadores/sistemas operativos que admiten el uso de emojis y ademas podemos almacenarlo en base de datos.
select {
height: 50px;
line-height: 50px;
font-size: 12pt;
}HTML
<select name="countries">
<option value="NL">🇳🇱 Netherlands</option>
<option value="DE">🇩🇪 Germany</option>
<option value="FR">🇫🇷 France</option>
<option value="ES">🇪🇸 Spain</option>
</select>
<br /><br />
<select name="currency">
<option value="EUR">🇪🇺 € EUR 💶</option>
<option value="GBP">🇬🇧 £ GBP 💷</option>
<option value="USD">🇺🇸 $ USD 💵</option>
<option value="YEN">🇯🇵 ¥ YEN 💴</option>
</select>Poblar SELECT con FontAwesome
Otra opción seria manejar Font Awesome que es un framework de iconos vectoriales y estilos css.
- Paso 01.- Declarar el Framework en la etiqueta <head> via CDN
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" /> - Paso 02.- Declara estilo a la etiqueta SELECT para que acepte es estilo fontAwesome
<style>select{font-family: fontAwesome}</style> - Paso 03.- Crear una etiqueta SELECT con Iconos en formato Unicode
<select> <option value="fa-align-left"> fa-align-left</option> </select>
Crearemos un archivo de nombre iconos_select.html
Aquí les dejare el contenido del archivo usando el framework
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<style>
select{
font-family: fontAwesome
}
</style>
</head>
<body>
<div>
<select>
<option value="fa-align-left"> fa-align-left</option>
<option value="fa-align-right"> fa-align-right</option>
<option value="fa-amazon"> fa-amazon</option>
<option value="fa-ambulance"> fa-ambulance</option>
<option value="fa-anchor"> fa-anchor</option>
<option value="fa-android"> fa-android</option>
<option value="fa-angellist"> fa-angellist</option>
<option value="fa-angle-double-down"> fa-angle-double-down</option>
<option value="fa-angle-double-left"> fa-angle-double-left</option>
<option value="fa-angle-double-right"> fa-angle-double-right</option>
<option value="fa-angle-double-up"> fa-angle-double-up</option>
</select>
</div>
</body>
</html>Para armar listas amigables lo mas recomendado es usar emojis, pero si quieres manejar otras opciones podemos incorporar el framework FontAwesome.
