我的进度条颜色在 Firefox 中不起作用答案

【问题标题】：My progress bar colors are not working in Firefox我的进度条颜色在 Firefox 中不起作用
【发布时间】：2017-10-23 19:30:20
【问题描述】：

所以我构建了一个交互式进度条，在 Google Chrome 中一切正常，在没有 Safari 供应商前缀的情况下，它甚至在 Safari 中看起来也很好（令人惊讶的是）。但是，进度条颜色会回到 Firefox 中的默认蓝色。我试过使用供应商前缀，它仍然变回蓝色。我有点困惑我现在应该走什么路线。我听说过但从未使用过功能查询，不确定这是否是使用它们的合适时间或什么。进度条应为红色，直到达到 100%，然后变为绿色。这是我到目前为止所拥有的：

(function() {
  var button, heading, initialValue, progressbar;

  button = document.getElementById('btn');

  progressbar = document.getElementById('progress-bar');

  heading = document.getElementById('visual-progress');

  initialValue = 'Quiz Progress';

  button.addEventListener('click', function() {
    var myValue;
    if (progressbar.value >= 100) {
      progressbar.value = 100;
    } else {
      progressbar.value += 25;
    }
    if (progressbar.value === 100) {
      progressbar.classList.add('progress-100');
    }
    myValue = initialValue + ' ' + progressbar.value;
    document.getElementById('visual-progress').innerHTML = myValue + '%';
    return button.classList.add('button-active');
  });

}).call(this);

@import url("https://fonts.googleapis.com/css?family=Playfair+Display");
nav {
  background: black;
  height: 80px;
  width: 100%;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
}

.progress-container {
  padding: 10px 20px;
  margin-top: 3em;
}

progress {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 20px;
}

progress::-webkit-progress-bar {
  background-color: #ccc;
  width: 100%;
}

progress::-moz-progress-bar {
  background-color: #ccc;
  width: 100%;
}

progress::-webkit-progress-value {
  background-color: #D22128 !important;
  -webkit-transition: all .7s;
  transition: all .7s;
}

progress::-moz-progress-value {
  background-color: #D22128 !important;
  -webkit-transition: all .7s;
  transition: all .7s;
}

.progress-100::-webkit-progress-value {
  background-color: forestgreen !important;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.progress-100::-moz-progress-value {
  background-color: forestgreen !important;
  -webkit-transition: all .5s;
  transition: all .5s;
}

button {
  margin-top: 2em;
  background: transparent;
  color: black;
  border: 1px solid black;
  padding: .7em 3em;
}

.button-active {
  -webkit-transition: all .2s;
  transition: all .2s;
  background: black;
  color: white;
}

.card-container {
  max-width: 450px;
  margin: 0 auto;
}

.success-message {
  font-family: 'Playfair Display', serif;
  text-align: center;
  padding-bottom: 2em;
  -webkit-animation: slideUp .5s;
          animation: slideUp .5s;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), 0 6px 13px rgba(0, 0, 0, 0.22);
  padding: 20px;
  margin-top: 3em;
  min-height: 150px;
}

.success-paragraph {
  font-size: 14px;
}

@-webkit-keyframes slideUp {
  from {
    -webkit-transform: translateY(500px);
            transform: translateY(500px);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    -webkit-transform: translateY(500px);
            transform: translateY(500px);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

<body>
  <nav></nav>
  <div class='container'>
    <div class='progress-container'>
      <h1 class='ut-margin-v-sm' id='visual-progress'>Quiz Progress</h1>
      <progress id='progress-bar' max='100' value='0'></progress>
      <button id='btn'>Next</button>
    </div>
  </div>
  <div class='card-container'>
    <div id='output'></div>
  </div>
</body>

【问题讨论】：

为了强调@Kaiido 在回答中所说的内容，::-webkit-progress-value 是非标准的，不在任何标准规范中。因此，没有::-moz-progress-value这样的东西。
@Rob 如果我没记错的话，::[-XXX-]progress-bar 也不是。
@Kaiido 它可用，但同样，它是非标准的，不应使用：developer.mozilla.org/en-US/docs/Web/CSS/::-moz-progress-bar

标签： javascript css html firefox

【解决方案1】：

Firefox 似乎没有实现 ::progress-value 伪元素。

对于此浏览器，您将直接定位父级::progress-bar。

(function() {
  var button, heading, initialValue, progressbar;

  button = document.getElementById('btn');

  progressbar = document.getElementById('progress-bar');

  heading = document.getElementById('visual-progress');

  initialValue = 'Quiz Progress';

  button.addEventListener('click', function() {
    var myValue;
    if (progressbar.value >= 100) {
      progressbar.value = 100;
    } else {
      progressbar.value += 25;
    }
    if (progressbar.value === 100) {
      progressbar.classList.add('progress-100');
    }
    myValue = initialValue + ' ' + progressbar.value;
    document.getElementById('visual-progress').innerHTML = myValue + '%';
    return button.classList.add('button-active');
  });

}).call(this);

@import url("https://fonts.googleapis.com/css?family=Playfair+Display");
nav {
  background: black;
  height: 80px;
  width: 100%;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
}

.progress-container {
  padding: 10px 20px;
  margin-top: 3em;
}

progress {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 20px;
}

progress::-webkit-progress-bar {
  background-color: #ccc;
  width: 100%;
}

progress{ /* for FF target directly the element */
  background-color: #ccc;
  width: 100%;
}

progress::-webkit-progress-value {
  background-color: #D22128 !important;
  -webkit-transition: all .7s;
  transition: all .7s;
}

progress::-moz-progress-bar { /* for FF ::progress-bar is the value bar */
  background-color: #D22128 !important;
  transition: all .7s;
}

.progress-100::-webkit-progress-value {
  background-color: forestgreen !important;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.progress-100::-moz-progress-bar {
  background-color: forestgreen !important;
  transition: all .5s;
}

button {
  margin-top: 2em;
  background: transparent;
  color: black;
  border: 1px solid black;
  padding: .7em 3em;
}

.button-active {
  -webkit-transition: all .2s;
  transition: all .2s;
  background: black;
  color: white;
}

.card-container {
  max-width: 450px;
  margin: 0 auto;
}

.success-message {
  font-family: 'Playfair Display', serif;
  text-align: center;
  padding-bottom: 2em;
  -webkit-animation: slideUp .5s;
          animation: slideUp .5s;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), 0 6px 13px rgba(0, 0, 0, 0.22);
  padding: 20px;
  margin-top: 3em;
  min-height: 150px;
}

.success-paragraph {
  font-size: 14px;
}

@-webkit-keyframes slideUp {
  from {
    -webkit-transform: translateY(500px);
            transform: translateY(500px);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    -webkit-transform: translateY(500px);
            transform: translateY(500px);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

<body>
  <nav></nav>
  <div class='container'>
    <div class='progress-container'>
      <h1 class='ut-margin-v-sm' id='visual-progress'>Quiz Progress</h1>
      <progress id='progress-bar' max='100' value='0'></progress>
      <button id='btn'>Next</button>
    </div>
  </div>
  <div class='card-container'>
    <div id='output'></div>
  </div>
</body>

【讨论】：