0
Also habe ich eine interaktive Fortschrittsbalken aufgebaut und alles funktioniert gut in Google Chrome und es sieht sogar gut in Safari (überraschend) ohne Safari-Anbieter-Präfixe. Die Fortschrittsbalkenfarbe wird jedoch in Firefox auf die Standardfarbe Blau zurückgesetzt. Ich habe versucht, Vendor-Präfixe zu verwenden, und es ändert sich immer noch zurück zu blau. Ich bin irgendwie verwirrt darüber, welchen Weg ich jetzt nehmen sollte. Ich habe gehört, aber nie Feature-Abfragen verwendet, nicht sicher, ob dies ein geeigneter Zeitpunkt ist, sie zu verwenden oder was. Der Fortschrittsbalken sollte rot sein, bis er 100% erreicht und dann grün wird. Das ist, was ich habe, so weit:Meine Fortschrittsbalken Farben funktionieren nicht in Firefox
(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>
Um zu betonen, was in einer Antwort @Kaiido sagt, ':: - Webkit-progress-value' ist nicht-Standard und nicht in irgendeiner Standardspezifikation. Daher gibt es keinen '' - moz-progress-Wert. – Rob
@Rob wenn ich mich nicht irre, ist auch ':: [- XXX-] progress-bar'. – Kaiido
@Kaiido Es ist verfügbar, aber es ist nicht Standard und sollte nicht verwendet werden: https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-progress-bar – Rob