Bootstrap 4 - 自定义进度条

我正在使用Bootstrap 4 alpha。我如何定制（例如：删除边框半径，更改条形底色，填充颜色等）？Bootstrap 4 - 自定义进度条

试着用下面的代码。但它不工作虽然:(

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

来源

2015-09-29 Reddy

''是依赖于浏览器的元素。在Firefox上，它会看起来完全不同于在Chrome上 – Justinas

** @ Justinas ** ..感谢您的回答......这意味着，我没有任何选项来更改Bootstrap 4的''栏？ :( – Reddy

是的，你可以改变它，但不知道在铬，但在Firefox中，你可以 –

检查这个片段在Firefox

这个片段将只Firefox工作..

编辑

我也创建plunker在Firefox显示请检查该

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>

对于铬检查以下plunker

检查这个Chrome Plunker

来源

2015-09-29 05:55:22

谢谢** @ Amit singh ** ......它几乎在Chrome中工作..但对不起，我没有Firefox浏览器访问 – Reddy

欢迎您@Reddy无论与Firefox如果你想它在Firefox中工作，请检查我更新的答案 –

谢谢** @阿米特** .... Mozilla plunker示例工作是铬，但不是铬plunker :) 一些如何，它在Chrome中工作...感谢您的答案 – Reddy

有类似的问题，但我只是想改变进度部分的颜色。

我的进度条如下：

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

我添加了自定义类progress-custom到对象，并定义了一些CSS它。

.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; 
    } 
}

这些额外的CSS将改变进度部分的颜色。我还测试了边界半径，也可以将其更改为任何你想要的。

我刚刚测试过它确实很快：Chrome和Firefox受到了这些变化的影响，IE有正确的颜色，但边界半径不起作用。

来源

2016-07-21 08:57:54

Bootstrap 4 - 自定义进度条

回答

相关问题