Bootstrap 4 - Personnaliser la barre de progression

J'utilise Bootstrap 4 alpha. Comment est-ce que je peux customiser (par exemple: enlevant le border-radius, changeant la couleur de base de barre, la couleur remplie etc ...)?Bootstrap 4 - Personnaliser la barre de progression

Essayé avec le code ci-dessous .. mais il ne fonctionne pas bien :(

LIVE DEMO

HTML

<div class="b4-test"> 
    <progress class="progress" value="75" max="100">75%</progress> 
</div>

CSS

.b4-test{ 
    padding:50px; 
    width:500px; 
    margin:50px auto; 
    text-align:center; 
    background:#ccc; 
} 

progress{ 
    border-radius:0 !important; 
    background-image:none !important; 
    background-color:red !important; 
    color:green !important; 
    height:50px; 
}

Source

2015-09-29 Reddy

'' est un élément dépendant du navigateur. Sur Firefox, il sera complètement différent de Chrome – Justinas

** @ Justinas ** .. Merci pour la réponse ... cela signifie, je n'ai aucune option pour changer la barre '' pour Bootstrap 4? :( – Reddy

oui vous pouvez le changer mais pas sûr en chrome mais dans firefox vous pouvez –

Vérifiez cet extrait dans Firefox

Cet extrait fonctionnera dans Firefox seulement ..

Modifier

J'ai également créé plunker pour montrer à Firefox s'il vous plaît vérifier

Firefox Plunker

.b4-test { 
 
    padding: 50px; 
 
    width: 500px; 
 
    margin: 50px auto; 
 
    text-align: center; 
 
    background: #ccc; 
 
} 
 
.progress[value] { 
 
    border-radius: 0; 
 
    background-color: red; 
 
} 
 
.progress[value]::-moz-progress-bar { 
 
    background-color: green; 
 
}

<div class="b4-test"> 
 
    <progress class="progress" value="75" max="100">75%</progress> 
 
</div>

Pour Chrome vérifier le dessous plunker

Cocher cette Chrome Plunker

Source

2015-09-29 05:55:22

Merci ** @ Amit Singh ** ... c'est presque travailler dans Chrome ..mais désolé, je n'ai pas l'accès au navigateur firefox – Reddy

vous êtes les bienvenus @Reddy, peu importe avec firefox si vous voulez que cela fonctionne dans firefox s'il vous plaît vérifier ma mise à jour –

Merci ** @ Amit ** .... Mozilla plunker exemple fonctionne est Chrome mais pas Plunker Chrome :) Un peu comment, il fonctionne dans Chrome ... Merci pour la réponse – Reddy

Had problème similaire, mais je voulais juste changer la couleur de la partie de progression.

Mon barre de progression est la suivante:

<progress class="progress progress-custom" value="25" max="100">25%</progress>

j'ai ajouté la classe personnalisée progress-custom à l'objet et défini des CSS pour elle.

.progress-custom[value]::-webkit-progress-value { 
    background-color: #FE6502; 
} 

.progress-custom[value]::-moz-progress-bar { 
    background-color: #FE6502; 
} 

.progress-custom[value]::-ms-fill { 
    background-color: #FE6502; 
} 

@media screen and (min-width: 0\0) { 
    .progress-custom .progress-bar { 
    background-color: #FE6502; 
    } 
}

Ces CSS supplémentaires modifieront la couleur de la partie de progression. J'ai aussi testé avec le border-radius, il est aussi possible de le changer pour ce que vous voulez.

Je viens de le tester très rapidement: Chrome et Firefox ont été affectés par les changements, IE avait la bonne couleur, mais le border-radius ne fonctionnait pas.

Source

2016-07-21 08:57:54

Bootstrap 4 - Personnaliser la barre de progression

Répondre

Questions connexes