iOSでプログレスバーのスタイリングを変更するにはどうすればよいですか？

Question

SCSSとVariableクラスで遊んでいたので、自分のテーマと同じプログレスバーをカスタマイズできます。

プログレスバーのスタイリングは青と白で、スタイリングを追加すると、私はどのスタイリングでも緑の&グレーに変わります。

私は、これら二つのWebkitの疑似クラスを使用：

-webkit-progress-bar 

-webkit-progress-value 

は、「それは、ブラウザではなく、デバイス上で働いていました。」

これを行う特別な方法はありますか、それを逃しているだけですか？変更内容は、私がグーグルを使用しています。このjsfiddleページで見ることができ

EDIT

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

、他のブラウザは次のように延期することがありキツネとオペラ。

Answer 1

CSSの進行状況バーのスタイル設定を上書きする方法について説明している素敵な記事hereがあります。この記事では、プログレスバーの既定のスタイルをオーバーライドするいくつかの方法について説明しますが、必要なのは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; 
}