html - 进度条高度变化

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-外观:无；外观:无；如下:

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