html - 进度条高度变化

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

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

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

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

最佳答案

添加-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>

关于html - 进度条高度变化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45561469/