HTML + CSSFiltros
Filtro por valoración con barras
Cada nivel de estrellas muestra cuántas opiniones tiene y, al marcarlo, su barra y su estrella se colorean.
Ajustes
16px
1x
Código
<fieldset class="uv-frb"><legend>Valoración</legend><label style="--w:100%"><input type="checkbox" checked><span class="st" aria-label="5 estrellas">5<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span><span class="br"><i></i></span><span class="n">412</span></label><label style="--w:65%"><input type="checkbox" checked><span class="st" aria-label="4 estrellas">4<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span><span class="br"><i></i></span><span class="n">268</span></label><label style="--w:22%"><input type="checkbox"><span class="st" aria-label="3 estrellas">3<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span><span class="br"><i></i></span><span class="n">91</span></label><label style="--w:8%"><input type="checkbox"><span class="st" aria-label="2 estrellas">2<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span><span class="br"><i></i></span><span class="n">34</span></label><label style="--w:5%"><input type="checkbox"><span class="st" aria-label="1 estrella">1<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span><span class="br"><i></i></span><span class="n">19</span></label></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 filtros de opiniones funcionan mejor cuando se ve cuántos resultados trae cada opción. Esta lista muestra cinco filas de cinco a una estrella, cada una con una barra proporcional a su número de opiniones y la cifra al final. Las filas marcadas reciben un fondo cálido, una estrella y una barra de color, así que varios niveles se combinan de un vistazo.
Cada fila es una etiqueta de checkbox de ancho completo con una zona de toque amplia. Rellena anchos y cifras con tus datos y usa el color principal para el relleno.