如何使用Ionic在iOS上更改进度栏的样式？

用户名

我一直在SCSS和和Variable类一起玩，以便也可以像自定义主题一样自定义进度栏。

进度栏样式为蓝色和白色，添加样式时，无论我使用哪种样式，它都将变为绿色和灰色。

我使用了以下两个Webkit Pseudo类：

-webkit-progress-bar

-webkit-progress-value

“它可以在浏览器中工作，但不能在设备上工作。”

有没有什么特殊的方法可以做到这一点，或者我只是想念它。

编辑

的HTML

 <ion-item class="item-stable" ng-click="navtoPhases()">
    <div class="row">
         <div class="col"><h2>Chassis Prep</h2></div>
         <div class="col"><progress class="progress" max="100" value="{{ ph[0].Chassis }}"></progress></div>
    </div>
  </ion-item>

SCSS

progress.progress{
   // -webkit-progress-bar: #ffc900 !important ; 
   // -webkit-progress-value:#ef473a !important ;
   color:#33cd5f;
   background-color:#3299E6;
    width: 50;
}

更改可以在我正在使用Google的jsfiddle页面上看到，其他浏览器可能会像Fox和Opera那样延迟。

德克斯特

有一个很好的文章在这里，这解释了如何重写CSS的进度条样式。在本文中，讨论了几种替代进度条默认样式的方法，但是您真正需要的唯一方法是Chrome / Webkit，为方便起见，我在下面发布了该方法。

progress[value] {
  -webkit-appearance: none;
   appearance: none;
}

progress[value]::-webkit-progress-bar {
  background-color: #33cd5f;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-value {
  background-color: #3299E6;
  border-radius: 2px; 
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。