将html进度条设置为健康栏,其值为简单的Css

时间:2017-12-08 16:42:53

标签: html css

我正在尝试将HTML进度条设置为健康栏。

我试图让它看起来像健康值

enter image description here

我试过这个但没有工作

.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 个答案:

答案 0 :(得分:1)

您需要重置progress默认appearance

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
  appearance: none;
}

请参阅CSS-Tricks Article

.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>

答案 1 :(得分:1)

由于progress元素不允许您在进度条顶部本地添加文本,因此我们必须使用解决方法:在进度条顶部放置标签。

至于条形的样式,您可以直接设置progress元素的样式,并使用伪元素定位-webkit-progress-bar-webkit-progress-value

&#13;
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;

您必须使用标签position,这取决于您想要如何定位标签并设置进度条的样式。