HTML + CSSFiltros
Filtro de país con banderas
Lista de países con banderas y un buscador dentro del menú para ir directo al que quieres.
Ajustes
16px
1x
Código
<div class="uv-fcn"><button class="tg"><b>🌍 Todos los países</b><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="mn"><label class="sb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4.3-4.3"/></svg><input placeholder="Buscar país"></label><div class="ls"><button data-v="🇪🇸 España">🇪🇸 España</button><button data-v="🇫🇷 Francia">🇫🇷 Francia</button><button data-v="🇩🇪 Alemania">🇩🇪 Alemania</button><button data-v="🇮🇹 Italia">🇮🇹 Italia</button><button data-v="🇵🇹 Portugal">🇵🇹 Portugal</button><button data-v="🇲🇦 Marruecos">🇲🇦 Marruecos</button><button data-v="🇲🇽 México">🇲🇽 México</button><button data-v="🇯🇵 Japón">🇯🇵 Japón</button></div></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Dónde usarlo
Las banderas hacen que una lista larga se lea de un vistazo, porque la gente reconoce la suya antes de leer el nombre. Encaja en una agencia de viajes que filtra rutas por destino o en un directorio de proveedores por país. El buscador evita bajar por cincuenta entradas. También se conoce como selector de país.
Los emojis de bandera cambian según el sistema, y algunas versiones de Windows muestran letras en su lugar. Si eso te importa, cámbialos por banderas pequeñas en SVG. Y escribe los nombres de los países en el idioma de quien visita.