Question

所以我已经建立了一个交互式进度条，一切都在谷歌浏览器中运行良好，甚至在没有Safari供应商前缀的Safari（令人惊讶）中也很好看。但是，进度条颜色在Firefox中恢复为默认的蓝色。我尝试过使用供应商前缀，但仍然会变回蓝色。我对现在应该走的路线感到困惑。我听说但从未使用过功能查询，不确定这是否适合使用它们或什么时候使用。进度条应为红色，直到达到100％然后变为绿色。这就是我到目前为止所做的：

＆＃13;

(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);

＆＃13;

@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);
  }
}

＆＃13;

<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>

＆＃13;

Answer 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>

我的进度条颜色在Firefox

1 个答案: