如何自定义HTML <progress>元素的样式

在HTML中，<progress>元素用于表示任务的完成进度。要更改<progress>元素的value部分（即进度条已填充部分）的颜色，可以使用CSS进行自定义设置。不过需要注意的是，不同浏览器对<progress>元素的样式支持可能略有差异。

对于Webkit/Blink内核的浏览器（如Chrome、Safari和新版Edge）

你可以通过以下伪类选择器来修改进度条的样式：

/* 设置进度条的整体样式 */
progress {
    /* 可选：设置进度条的高度 */
    height: 20px;
}

/* 设置进度条背景（未完成部分）的样式 */
progress::-webkit-progress-bar {
    background-color: #f3f3f3; /* 修改背景颜色 */
}

/* 设置已完成部分的样式 */
progress::-webkit-progress-value {
    background-color: #0099FF; /* 修改进度条颜色 */
}

对于Gecko内核的浏览器（如Firefox）

对于Mozilla Firefox，你将需要使用不同的伪元素：

/* 设置已完成部分的样式 */
progress::-moz-progress-bar {
    background-color: #0099FF; /* 修改进度条颜色 */
}

全局兼容性处理

为了确保跨浏览器的兼容性，你可以结合上述两种方法，并添加一些通用样式：

/* 通用样式 */
progress {
    height: 20px;
    border-radius: 5px;
    overflow: hidden;
}

/* Webkit/Blink内核的样式 */
progress::-webkit-progress-bar {
    background-color: #f3f3f3;
}

progress::-webkit-progress-value {
    background-color: #0099FF;
}

/* Gecko内核的样式 */
progress::-moz-progress-bar {
    background-color: #0099FF;
}

这样，无论用户使用的是哪种浏览器，都能看到你所设定的进度条样式。

请注意，虽然这些CSS规则能让你定制进度条的基本外观，但某些细节上的表现仍然可能因浏览器而异。此外，尽量避免过于复杂的样式设计，以保持良好的用户体验和广泛的兼容性。