📣 Seu anúncio aqui? Anuncie no ForoBeta

Como usar a tag 'meter' para mostrar cores conforme a pontuação

  • Autor Autor ramonjosegn
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
ramonjosegn

ramonjosegn

Sigma
Verificación en dos pasos activada
Usuário 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 edição:
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Continuar com o Google Criar conta com e-mail
Leva 30 segundos · você volta a este tópico ao terminar
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 disse:
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;
}
Clique 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 disse:
Perdona, los CSS son para el Firefox, para el Chrome supongo que sabes que en lugar de "-moz" debes usar el "-webkit"
Saludos
Clique 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 disse:
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
Clique 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
 
Você precisa estar logado ou cadastrado para responder aqui.
Voltar
Topo