进度条高度变化

Question

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

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

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

Answer 2

您可以使用css选择器添加文本：在

之前

#bar {
        width: 100%;
        height: 1.5rem;
        text-align: center;
        color: white;
        position: relative;
        padding-top: 3px;
    }

#bar:before {
        content: 'Value is ' attr(value);
    }

<progress id="bar" value="65" max="70">test</progress>