进度条高度变化

Question

该进度条按预期工作，但未应用 CSS。它需要显示由 javascript 设置的内部白色文本。

我得到的只是细长的进度条，因此高度属性不起作用。有什么建议么？谢谢

#bar {
  width: 100%;
  height: 1.5rem;
  text-align: center;
  color: white;
}

<progress id="bar" value="0" max="70"></progress>

Answer 1

添加-webkit-appearance: none; -moz-appearance: none; appearance: none;如下：

#bar {
  width: 100%;
  height: 5.5rem;
  text-align: center;
  color: white;
  background-image: green;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

<progress id="bar" value="20" max="70"></progress>