1

我正在使用 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;
}
4

2 回答 2

3

检查此代码段Firefox

此片段Firefox仅适用于..

编辑

我还创建了 plunker 来显示Firefox请检查这个

火狐浏览器

.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，请检查以下 plunker

检查这个Chrome Plunker

于 2015-09-29T05:55:22.277 回答
1

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

我的进度条如下：

<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 的颜色正确，但边框半径不起作用。

于 2016-07-21T08:57:54.550 回答