Gibt es eine Möglichkeit, den HTML5-Fortschrittstag zu färben?

Gibt es keine Möglichkeit, die Farbe der progress-tag in css? Ich habe es versucht. Aber nur Breite und Höhe arbeiten. Ich will Haut die Farbe der progression (die innere Farbe, die zeigt den Prozentsatz der download). Ist es möglich?

Kommentar zu dem Problem - Öffnen
Wenn Sie die gleiche Frage und möchten, ändern Sie das Aussehen der HTML-5 - <Fortschritt> - tag, es ist ein gutes blog, die beschreiben, es ist, wie man sehr gut Hier Der link, dieser Beitrag ist geschrieben, ein paar Monate nach dieser Frage. Genießen Sie! Kommentarautor: Mosijava
Diese Seite hat mir geholfen: useragentman.com/blog/2012/01/03/... Kommentarautor: cynicaljoy
@priya Gepostet, eine Antwort, die tatsächlich funktioniert, bitte testen und akzeptieren oder zumindest zu kommentieren. Kommentarautor: John

InformationsquelleAutor der Frage priya | 2011-02-16

  1. 48

    Dies ist, was Sie suchen:

    progress[value] {color:red} /* IE10 */
progress::-webkit-progress-bar-value {background:red}
progress::-webkit-progress-value {background:red}
progress::-moz-progress-bar {background:red}

    Es funktioniert gut auf Chrome und Firefox 6.

    IE10 unterstützt auch die ::-ms-Füllung pseudo-element.

    InformationsquelleAutor der Antwort Knu

  2. 3

    Derzeit keine. Das design/look-and-feel " der Fortschrittsbalken ist derzeit definiert durch den browser und CSS kann nicht Stil der Fortschrittsbalken.

    Meine aktuelle Lösung ist die Verwendung mehrerer divs um Stil und zeigen einen Fortschrittsbalken mit CSS-sprite-Bildern.

    InformationsquelleAutor der Antwort mauris

  3. 0

    Gut ich werde sehen was ich tun kann um zu helfen :/

    Ich habe mir die Standard-Formatvorlage (css-Stil) von der progress-tag (mit Google Chrome element Untersuchen-option) und was ich gefunden habe ist folgende (hoffe das hilft):

    1.  -webkit-appearance: progress-bar;
2.  background-attachment: scroll;
3.  background-clip: border-box;
4.  background-color: gray;
5.  background-image: none;
6.  background-origin: padding-box;
7.  border-bottom-color: black;
8.  border-bottom-style: none;
9.  border-bottom-width: 0px;
10. border-left-width: 0px;
11. border-right-width: 0px;
12. border-top-color: black;
13. border-top-style: none;
14. border-top-width: 0px;
15. display: inline-block;
16. font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
17. font-size: 16px;
18. height: 16px;
19. line-height: 16px;
20. margin-bottom: 0px;
21. margin-left: 0px;
22. margin-right: 0px;
23. margin-top: 0px;
24. outline-color: black;
25. outline-style: none;
26. outline-width: 0px;
27. padding-bottom: 0px;
28. padding-left: 0px;
29. padding-right: 0px;
30. padding-top: 0px;
31. position: static;
32. text-align: center;
33. vertical-align: -3px;
34. width: 160px;
Styles
________________________________________

element.style {}
Matched CSS Rules
user agent stylesheet

progress {
1.  -webkit-appearance: progress-bar;
2.  display: inline-block;
3.  height: 1em;
4.  width: 10em;
5.  vertical-align: -0.2em;
6.  background-color: gray;
}

Pseudo element
user agent stylesheet

progress::-webkit-progress-bar-value {
1.  -webkit-appearance: progress-bar;
2.  background-color: green;
}

    InformationsquelleAutor der Antwort Colton

  4. 0

    Können Sie NICHT mix Mozilla-und WebKit-Präfixe in der gleichen Selektor, Sie muss völlig separate Regeln für die beiden rendering-engines...

    CSS

    progress {background-color: #aaa !important;}

progress::-moz-progress-bar {background-color: #f0f !important;}

progress::-webkit-progress-value {background-color: #f0f !important;}

    Getestet in Firefox 31 und Chrome 37. Mit #f0f, weil es sollte leicht zu erkennen, es sei denn, es gibt fundamentale (und wahrscheinlich auch psychischen) Probleme mit dem Farbschema.

    InformationsquelleAutor der Antwort John

Schreibe einen Kommentar