ios - 如何使用 Ionic 更改 iOS 上进度条的样式？

Question

我正在尝试使用 SCSS 和 Variable 类来自定义我的进度条，使其与我的主题一样。

进度条样式是蓝色和白色，添加样式时，无论我使用什么样式，它都会变为绿色和灰色。

我使用了这两个 Webkit 伪类:

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

变化可以在这个jsfiddle上看到页面我使用的是谷歌，其他浏览器可能会延迟，如 fox 和 opera。

Answer 1

有篇不错的文章here ，这解释了如何在 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; 
}