Question

我需要什么：

progress::-webkit-progress-bar{
   background-color: red;
}                                     //chrome

progress::-moz-progress-bar {  
    background-color: red;
}                                     //firefox

但是要在chrome和firefox中工作，样式应该是

malloc

其中设置ng-style for progress :: - webkit-progress-bar是不可能的。那么我如何动态地通过ng-style给出样式呢？有什么建议吗？

Answer 1

如何为进度条背景颜色变体定义类，以便添加所有浏览器前缀，并通过在类属性中插入变量来添加变量？

E.g。 CSS类

.progress-red::-webkit-progress-bar,
.progress-red::-moz-progress-bar{
    background-color: red;
}

.progress-blue::-webkit-progress-bar,
.progress-blue::-moz-progress-bar{
    background-color: blue;
}

和你的HTML

<progress class="progress-{{variable}}"></progress>

或者，您可以使用Bootstrap等进度条库或将自己定义为exemplified in this JSFiddle

使用ng-style将动态样式添加到进度栏

1 个答案: