如何更改HTML仪表盘的背景颜色？

Question

有没有办法改变HTML仪表的背景颜色？

我知道，默认情况下它的背景颜色是绿色。

是否可以将其背景颜色从绿色更改为其他颜色？

我尝试使用style属性，但它仍然保持绿色。

 <meter style="background-color:red;"min="0" low="40" high="95" max="100" value="65">
 </meter>

- Amit Verma

---

https://dev59.com/WGsz5IYBdhLWcg3wJUYo - G.L.P

Answer 1

meter::-webkit-meter-optimum-value {
  background: red;
}
meter::-moz-meter-bar { /* Firefox Pseudo Class */
  background: red;
}

<meter min="0" low="40" high="95" max="100" value="65">
</meter>

- m4n0

Answer 2

meter::-webkit-meter-optimum-value {
    background: red; /* Green */
}

<meter min="0" low="40" high="95" max="100" value="65" col>
</meter>

- Farhad Manafi

Answer 3

对于 Chrome：

/*meter */
meter::-webkit-meter-bar {background: #e6e6e9;} /*background color of bar*/
meter::-webkit-meter-optimum-value {background: green;}
meter::-webkit-meter-suboptimum-value{background:orange;}
meter::-webkit-meter-even-less-good-value{background:red;}

对于火狐浏览器：

/*meter */
/*bar with only one possible color*/
meter::-moz-meter-bar {background: red;}  /* color of bar*/

/* bar with different colors*/
/* between "low" and "high" thresholds*/
meter::-moz-meter-optimum-value {background: lightgreen;} 
/*below "low" threshold or above "high" threshold*/
meter::-moz-meter-suboptimum-value{background:gold;}  

- Kimberly I.

Answer 4

您需要选择计量值并相应地进行样式设置，如果需要更多输入，请参考此链接。

meter::-webkit-meter-optimum-value {
      box-shadow: 0 5px 5px -5px #999 inset;
      background-image: linear-gradient(
        90deg, 
        #8bcf69 5%, 
        #e6d450 5%,
        #e6d450 15%,
        #f28f68 15%,
        #f28f68 55%,
        #cf82bf 55%,
        #cf82bf 95%,
        #719fd1 95%,
        #719fd1 100%
      );
      background-size: 100% 100%;
    }

<meter value="0.6"></meter>

- stanze

Answer 5

<meter min="0" low="40" high="95" max="100" value="65" col>
</meter>

meter::-webkit-meter-optimum-value {
    background: red; /* Green */
}

- user5152314

Answer 6

我还制作了一个自定义计量器。实际上，它只是几行代码，比内置的标签更加灵活。而且它不依赖于浏览器。

function changeMeter(val){
    //add as many colors/conditions as you wish
    let color = val < 33 ? "red" : val < 66 ? "orange" : "green"
    document.getElementById('meter').style = `width:${val}%;background:${color};`
}

changeMeter(document.getElementById('meterinput').value) //get some initial value onload

.metercontainer{
    background: #000;
    overflow: hidden;
    width: 80px;
    height: 12px;
    border: 1px solid #8F8F9D;
    border-radius: 6px;
    box-sizing: border-box;
}

#meter{
    height: 100%;
}

<div class="metercontainer">
    <div id="meter"></div>
</div>
<input type="number" id="meterinput" onchange="changeMeter(this.value)" min="0" max="100" value="69">

- Foxcode

Answer 7

我将以下内容留在这里，供其他寻求计量帮助的人参考。

最近我创建了一个自定义计量器，而不是使用内置的HTML计量器。目的是为了完全自定义。下面是我想出的一个例子。完整的包可以在Github找到。

var inlineCSS = function(id, attribute, value) {
  switch (attribute) {
    /* layer 1 attributes */
    case 'meter-color':
      $(id)[0].style.backgroundColor = value;
      $(id)[0].style.backgroundImage = "none";
      break;
    case 'meter-length':
      var lengthArr = ["super-long", "x-long", "long", "normal", "short", "x-short", "super-short"];
      var lengthSizes = ["95%", "80%", "65%", "50%", "35%", "20%", "5%"];

      if (jQuery.inArray(value, lengthArr) !== -1) {
        $(id)[0].style.width = lengthSizes[jQuery.inArray(value, lengthArr)];
      } else {
        $(id)[0].style.width = value;
      }
      break;
    case 'meter-thickness':
      var heightArr = ["super-thick", "x-thick", "thick", "thin", "x-thin", "super-thin"];
      var heightSizes = [30 * 1.75, 30 * 1.5, 30 * 1.25, 30 * 0.75, 30 * 0.5, 30 * 0.25];

      if (jQuery.inArray(value, heightArr) !== -1) {
        $(id)[0].style.height = heightSizes[jQuery.inArray(value, heightArr)] + "px";
      }
      break;
    case 'meter-shadow':
      $(id)[0].style.boxShadow = value;
      break;
    case 'animation-speed':
      $(id)[0].style.animation = "move " + value + "s linear infinite";
      break;
      /* layer 3 attributes */
    case 'reveal-width':
      $(id)[0].style.backgroundImage = "linear-gradient(to right, transparent " + value + ", #555 " + value + ")";
      break;
      /* layer 4 attributes */
    case 'font-size':
      $(id)[0].style.fontSize = value;
      break;
  }
};

$(document).ready(function() {
  $(".meter > span").each(function() {
    $(this).data("origWidth", ($(this).width() / $(this).parent().width()) * 100)
      .width(0)
      .animate({
        width: $(this).data("origWidth") + "%"
      }, 3600);
  });

  $(".meter").each(function() {
    /**
     * options              : meter options passed by data-options attribute
     * selector             : value used to reference html element for meter update
     */
    var options = $(this).data("options");
    var selector = "div#" + $(this).attr("id") + ".meter";

    for (var x in options) {
      if (jQuery.inArray(x, ["meter-color", "meter-length", "meter-thickness", "meter-shadow"]) !== -1) {
        inlineCSS(selector, x, options[x]);
      } else
      if (jQuery.inArray(x, ["candystripe-color", "animation-speed"]) !== -1) {
        inlineCSS(selector + " > span", x, options[x]);
      } else
      if (jQuery.inArray(x, ["reveal-width"]) !== -1) {
        inlineCSS(selector + " > span > span", x, options[x]);
      } else
      if (jQuery.inArray(x, ["font-size", "font-color"]) !== -1) {
        inlineCSS(selector + " > span > span > span", x, options[x]);
      } else {
        continue;
      }
    }
  });
});

body {
  background-color: #333;
  font-size: 2em;
}


/* animated layered bars defaults */

.meter {
  font-family: monospace;
  position: relative;
  width: 100%;
  height: 30px;
  margin: 10px 0;
  background-color: #555;
  padding: 0;
  background-image: linear-gradient( 90deg, red, orange, yellow, lime, green);
  border: 1px solid #000;
  z-index: 1;
}

.meter>span {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-size: 50px 50px;
  -webkit-animation: move 2s linear infinite;
  animation: move 2s linear infinite;
  overflow: hidden;
  z-index: 2;
}

.meter>span>span {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.meter>span>span>span {
  display: block;
  width: calc(100% - 2px);
  text-align: center;
  font-variant: small-caps;
  font-weight: bolder;
  background: linear-gradient(to right, #ff0000 0%, #ffa500 25%, #ffff00 50%, #00ff00 75%, #008000 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #000;
}


/* animations */

@-webkit-keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}


/* rounded borders */

.meter-rounded,
.meter-rounded>span {
  border-radius: 25px;
}

.meter-rounded-trbl,
.meter-rounded-trbl>span {
  border-radius: 0 25px;
}

.meter-rounded-tlbr,
.meter-rounded-tlbr>span {
  border-radius: 25px 0;
}

.meter-rounded-bottom,
.meter-rounded-bottom>span {
  border-radius: 0 0 25px 25px;
}

.meter-rounded-top,
.meter-rounded-top>span {
  border-radius: 25px 25px 0 0;
}

.meter-rounded-left,
.meter-rounded-left>span {
  border-radius: 25px 0 0 25px;
}

.meter-rounded-right,
.meter-rounded-right>span {
  border-radius: 0 25px 25px 0;
}


/* remove candystripping */

.no-stripes>span {
  -webkit-animation: none !important;
  animation: none !important;
  background-image: none !important;
}


/* remove animation */

.no-animation>span {
  -webkit-animation: none !important;
  animation: none !important;
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div id='defaultMeter' class='meter' data-options='{}'>
  <span>
        <span>
            <span>This is the default result.</span>
        </span>
  </span>
</div>
<hr>
<div id='customMeter' class='meter meter-rounded' data-options='{"meter-color":"black","animation-speed":1}'>
  <span>
        <span>
            <span>This is a custom result.</span>
        </span>
  </span>
</div>
<hr>
<div id='customMeter1' class='meter meter-rounded-right' data-options='{"meter-color":"red","animation-speed":6,"meter-shadow":"1px 1px 5px 2px #222","meter-length":"long"}'>
  <span>
        <span>
            <span>This is a custom result.</span>
        </span>
  </span>
</div>
<hr>
<div id='customMeter2' class='meter' data-options='{"meter-color":"orange","animation-speed":4,"meter-shadow":"inset 0 0 2px 2px #222","reveal-width":"67%"}'>
  <span>
        <span>
            <span>This custom result has a reveal set @ 67%.</span>
        </span>
  </span>
</div>

- JLDN Admin