将html进度条样式化为具有简单Css值的健康条
将html进度条样式化为具有简单Css值的健康条
提问于 2017-12-09 00:42:53
我正在尝试将HTML进度条样式化为健康条。
我试着让它看起来像这样，具有健康价值。
我试过了，但不起作用
.progressplayer[value]::-webkit-progress-bar {
background-color: #eee;
}
.progressplayer[value]::-webkit-progress-value {
background-color: #FF0000;
}<progress class="progressplayer" id="playerhealth" value="100" max="100"></progress>
对基督徒的回答的评论：
<div class="progress-container">
<progress id="playerhealth" *ngIf="state==1" id="playerhealth" value="100" max="100"></progress>
<p class="progress-label">
{{playerhp}}
</p>
<progress id="enemyhealth" *ngIf="state==1" id="enemyhealth" value="100" max="100"></progress>
<p class="progress-label">
{{mhp}}
</p>
</div> 用这个我不能显示第二个进度标签。
回答 2
Stack Overflow用户
发布于 2017-12-09 00:59:19
您需要重置progress默认appearance
progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
appearance: none;
}请参阅
.progressplayer[value]::-webkit-progress-bar {
background-color: green;
}
.progressplayer[value]::-webkit-progress-value {
background-color: #FF0000;
}
progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
appearance: none;
}<progress class="progressplayer" id="playerhealth" value="80" max="100"></progress>
Stack Overflow用户
发布于 2017-12-09 01:15:56
因为progress元素不允许您在进度栏上本地添加文本，所以我们必须使用一种变通办法:在进度栏上放置一个标签。
至于栏的样式，您可以直接设置progress元素的样式，并使用伪元素来定位-webkit-progress-bar和-webkit-progress-value
.progress-container {
position: relative;
}
.progress-container progress {
background-color: #eee;
height: 40px;
}
.progress-container progress::-webkit-progress-bar {
background-color: #eee;
}
.progress-container progress::-webkit-progress-value {
background-color: red;
}
.progress-container .progress-label {
position: absolute;
top: 7px;
margin: 0;
left: 65px;
font-size: 22px;
}<h1>Player health:</h1>
<div class="progress-container player-health">
<progress class="progressplayer" id="playerhealth" value="80" max="100"></progress>
<p class="progress-label">
80%
</p>
</div>
<h1>Enemy health:</h1>
<div class="progress-container enemy-health">
<progress class="progressplayer" id="playerhealth" value="80" max="100">
</progress>
<p class="progress-label">
80%
</p>
</div>
您将不得不使用label的position，这取决于您希望如何定位它和设置进度条的样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47718631
复制相关文章
相似问题
腾讯云开发者
