Question

我正在玩SCSS和Variable类，以便自定义我的进度条与我的主题相同。

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

我使用了这两个Webkit Pseudo类：

-webkit-progress-bar

-webkit-progress-value

＆＃34;它在浏览器中工作，但在设备上没有。＆＃34;

有没有什么特别的方法可以做到这一点，或者我只是错过了它。

修改

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页面上看到，其他浏览器可能会像狐狸和歌剧一样推迟。

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

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

1 个答案: