HTML + CSSFiltros
Índice alfabético con lupa
Las letras de la A a la Z crecen bajo el cursor como un dock y la elegida sale en una burbuja.
Ajustes
16px
1x
Código
<fieldset class="uv-faz"><legend>Artistas por letra</legend><div class="rw"><label><input type="radio" name="uv-faz"><span data-l="A">A</span></label><label><input type="radio" name="uv-faz"><span data-l="B">B</span></label><label><input type="radio" name="uv-faz"><span data-l="C">C</span></label><label><input type="radio" name="uv-faz"><span data-l="D">D</span></label><label><input type="radio" name="uv-faz"><span data-l="E">E</span></label><label><input type="radio" name="uv-faz"><span data-l="F">F</span></label><label><input type="radio" name="uv-faz"><span data-l="G">G</span></label><label><input type="radio" name="uv-faz"><span data-l="H">H</span></label><label><input type="radio" name="uv-faz"><span data-l="I">I</span></label><label><input type="radio" name="uv-faz"><span data-l="J">J</span></label><label><input type="radio" name="uv-faz"><span data-l="K">K</span></label><label><input type="radio" name="uv-faz"><span data-l="L">L</span></label><label><input type="radio" name="uv-faz" checked><span data-l="M">M</span></label><label><input type="radio" name="uv-faz"><span data-l="N">N</span></label><label><input type="radio" name="uv-faz"><span data-l="Ñ">Ñ</span></label><label><input type="radio" name="uv-faz"><span data-l="O">O</span></label><label><input type="radio" name="uv-faz"><span data-l="P">P</span></label><label><input type="radio" name="uv-faz"><span data-l="Q">Q</span></label><label><input type="radio" name="uv-faz"><span data-l="R">R</span></label><label><input type="radio" name="uv-faz"><span data-l="S">S</span></label><label><input type="radio" name="uv-faz"><span data-l="T">T</span></label><label><input type="radio" name="uv-faz"><span data-l="U">U</span></label><label><input type="radio" name="uv-faz"><span data-l="V">V</span></label><label><input type="radio" name="uv-faz"><span data-l="W">W</span></label><label><input type="radio" name="uv-faz"><span data-l="X">X</span></label><label><input type="radio" name="uv-faz"><span data-l="Y">Y</span></label><label><input type="radio" name="uv-faz"><span data-l="Z">Z</span></label></div></fieldset>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
Ver todos: FiltrosDónde usarlo
Los directorios largos, como artistas, contactos, glosarios o listados de marcas, se recorren mejor con un índice alfabético. Esta tira agranda la letra bajo el puntero y sus vecinas, como el dock de macOS, usando solo :has y selectores de hermanos. La letra elegida aparece arriba en una burbuja de color con forma de gota, así que la sección actual siempre está clara.
Cada letra es un radio, lo que lo hace accesible con teclado y fácil de conectar a una lista. Incluye la Ñ; quítala o añade letras de otros idiomas en el HTML.