OStack程序员社区-中国程序员成长平台

标题: ios - 如何使用 Ionic 在 iOS 上更改进度条的样式？ [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-12 19:10
标题: ios - 如何使用 Ionic 在 iOS 上更改进度条的样式？

我正在玩弄 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 上看到更改。我正在使用 Google 的页面，其他浏览器可能会延迟，例如 fox 和 opera。

---

Best Answer-推荐答案

有一篇不错的文章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; 
}

关于ios - 如何使用 Ionic 在 iOS 上更改进度条的样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36284172/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4