如何更改HTML表的背景颜色?

时间:2015-06-17 04:47:15

标签: html css

有没有办法改变HTML米的背景颜色?

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

这可以将其背景颜色从绿色更改为任何其他颜色吗?

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

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

6 个答案:

答案 0 :(得分:6)

&#13;
&#13;
meter::-webkit-meter-optimum-value {
    background: red; /* Green */
}
&#13;
<meter min="0" low="40" high="95" max="100" value="65" col>
</meter>
&#13;
&#13;
&#13;

答案 1 :(得分:4)

&#13;
&#13;
meter::-webkit-meter-optimum-value {
  background: red;
}
meter::-moz-meter-bar { /* Firefox Pseudo Class */
  background: red;
}
&#13;
<meter min="0" low="40" high="95" max="100" value="65">
</meter>
&#13;
&#13;
&#13;

答案 2 :(得分: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;}

for firefox:

/*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;}  

答案 3 :(得分:2)

您需要相应地选择仪表值和样式,如需更多输入,请参阅link

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>

答案 4 :(得分:1)

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

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

答案 5 :(得分:1)

将其留给其他寻求仪表帮助的人。

我最近创建了一个自定义仪表,而不是使用内置的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>