Bootstrap 4 - 自定义进度条答案

【问题标题】：Bootstrap 4 - Customize Progress BarBootstrap 4 - 自定义进度条
【发布时间】：2015-12-26 11:22:26
【问题描述】：

我正在使用 Bootstrap 4 alpha。如何自定义（例如：移除边框半径、更改条形基色、填充颜色等...）？

尝试使用以下代码..但它不起作用:(

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

【问题讨论】：

<progress> 是与浏览器相关的元素。在 Firefox 上，它看起来与在 Chrome 上完全不同
@Justinas.. 感谢您的回答...这意味着，我没有任何选项可以更改 Bootstrap 4 的“”栏？ :(
是的，你可以改变它，但在 chrome 中不确定，但在 Firefox 中你可以
对于 chrome 你也可以使用 -- .progress[value]::-webkit-progress-value 属性来设置自定义 css 属性

标签： css twitter-bootstrap twitter-bootstrap-4 bootstrap-4

【解决方案1】：

在Firefox中检查这个sn-p

此 sn-p 仅适用于 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>

对于 Chrome，请检查以下插件

检查这个Chrome Plunker

【讨论】：

谢谢@Amit singh...它几乎可以在 Chrome 中运行.. 但抱歉，我没有 Firefox 浏览器访问权限
欢迎@Reddy，无论是否使用 Firefox，如果您希望它在 Firefox 中工作，请查看我的更新答案
谢谢 @Amit.... Mozilla plunker 示例是 Chrome，但不是 Chrome plunker :) 某种程度上，它在 Chrome 中工作...感谢您的回答

【解决方案2】：

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

我的进度条如下：

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

我将自定义类 progress-custom 添加到 Object 并为它定义了一些 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 的颜色正确，但边框半径不起作用。

【讨论】：