ios - 如何使用 Ionic 在 iOS 上更改进度条的样式？
<p><p>我正在玩弄 <code>SCSS</code> 和 <code>Variable</code> 类，以便将我的进度条自定义为与我的主题相同。 </p>
<p>进度条样式为蓝色和白色，添加样式时，无论我使用什么样式，它都会变为绿色和灰色。</p>
<p>我使用了这两个 Webkit 伪类:</p>
<pre><code>-webkit-progress-bar
-webkit-progress-value
</code></pre>
<p>“它在浏览器中有效，但在设备上无效。”</p>
<p>有什么特殊的方法可以做到这一点，或者我只是想念它。 </p>
<p><strong>编辑</strong></p>
<p><strong>HTML</strong></p>
<pre><code> <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.Chassis }}"></progress></div>
</div>
</ion-item>
</code></pre>
<p><strong>SCSS</strong></p>
<pre><code>progress.progress{
// -webkit-progress-bar: #ffc900 !important ;
// -webkit-progress-value:#ef473a !important ;
color:#33cd5f;
background-color:#3299E6;
width: 50;
}
</code></pre>
<p>可以在 <a href="https://jsfiddle.net/oco1bu12/" rel="noreferrer noopener nofollow">jsfiddle</a> 上看到更改。我正在使用 Google 的页面，其他浏览器可能会延迟，例如 fox 和 opera。 </p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>有一篇不错的文章<a href="https://css-tricks.com/html5-progress-element/" rel="noreferrer noopener nofollow">here</a> ，这解释了如何在 CSS 中覆盖进度条的样式。在本文中，讨论了几种覆盖进度条默认样式的方法，但您真正需要的唯一一种是用于 Chrome/Webkit 的方法，为了您的方便，我在下面发布了它。</p>
<pre><code>progress {
-webkit-appearance: none;
appearance: none;
}
progress::-webkit-progress-bar {
background-color: #33cd5f;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress::-webkit-progress-value {
background-color: #3299E6;
border-radius: 2px;
}
</code></pre></p>
<p style="font-size: 20px;">关于ios - 如何使用 Ionic 在 iOS 上更改进度条的样式？，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/36284172/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/36284172/
</a>
</p>
页:
[1]