Cómo usar la etiqueta 'meter' para mostrar colores según puntuación

  • Autor Autor ramonjosegn
  • Fecha de inicio Fecha de inicio
ramonjosegn

ramonjosegn

Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
Hola chicos/as.

Hace poco descubrí esta etiqueta de HTML5 pero no estoy aún muy seguro de cómo usarla.

Los ejemplos que he visto no son muy claros.

Quiero tener algo así

  • PUNTUACIÓN DE 0 A 39 QUE SE MUESTRE ROJO
  • PUNTUACIÓN ENTRE 40 Y 69% que se muestre AMARILLO
  • PUNTUACIÓN HASTA DEL 70% hasta el 100% que se muestre VERDE
Aún no tengo claro cómo organizar los colores.

Gracias por la ayuda.
 
Última edición:
Como yo lo haría:
El value del HTML es el que dibuja la barra
Los estilos del CSS ya son cosa tuya. Tamaño y colores.
Funciona perfectamente tal y como tú has indicado que necesitas,


HTML
<meter class="forobeta_meter" min="0" low="40" high="70" optimum="90" max="100" value="39"></meter>

CSS
.forobeta_meter {
background: lightgrey;
width: 350px;
height:50px;
}
.forobeta_meter:-moz-meter-optimum::-moz-meter-bar {
background:red;
}
.forobeta_meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: green;
}
.forbeta_meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: yellow;
}
 
Perdona, los CSS son para el Firefox, para el Chrome supongo que sabes que en lugar de "-moz" debes usar el "-webkit"
Saludos
 
Sencilla dijo:
Como yo lo haría:
El value del HTML es el que dibuja la barra
Los estilos del CSS ya son cosa tuya. Tamaño y colores.
Funciona perfectamente tal y como tú has indicado que necesitas,


HTML
<meter class="forobeta_meter" min="0" low="40" high="70" optimum="90" max="100" value="39"></meter>

CSS
.forobeta_meter {
background: lightgrey;
width: 350px;
height:50px;
}
.forobeta_meter:-moz-meter-optimum::-moz-meter-bar {
background:red;
}
.forobeta_meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: green;
}
.forbeta_meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: yellow;
}
Hacer clic para expandir...

Muchísimas gracias, después de varios intentos ya iba por buen camino, pero ahí me facilitaste muchísimo el trabajo y la comprensión.
 
Sencilla dijo:
Perdona, los CSS son para el Firefox, para el Chrome supongo que sabes que en lugar de "-moz" debes usar el "-webkit"
Saludos
Hacer clic para expandir...
En lo que he probado no he visto que se necesite añadir CSS, corren los colores sin necesidad de CSS.

No me quedó claro el motivo para añadirlos. Gracias.
 
Hola. CSS no es necesario si no quieres cambiar los colores standar rojo,verde,amarillo
Me gusta poner los elementos en clases para posibles manipulaciones futuras
En tu caso no es necesario si te vale lo que viene por defecto
 
Sencilla dijo:
Hola. CSS no es necesario si no quieres cambiar los colores standar rojo,verde,amarillo
Me gusta poner los elementos en clases para posibles manipulaciones futuras
En tu caso no es necesario si te vale lo que viene por defecto
Hacer clic para expandir...

Gracias por la ayuda. Lo que he visto es que es bastante molesta la alineación... con razón todo el mundo pone los datos por encima.
 
Perdona, no había visto este mensaje
Por eso me gusta poner los elementos en un clase
Aunque meter es un poco raro, dentro de una clase te es más fácil alinear, cambiar tamaños, cambiar colores, etc ...
Como en el ejemplo que te puse...
Saludos
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba