如何在Safari中为meter元素设置样式？webkit方案Chrome有效Safari无效

嘿，我之前也踩过Safari对meter元素样式支持的坑，刚好能帮到你！你遇到的问题是因为Safari对meter的Webkit伪类实现和Chrome有差异，而且它的默认内置样式优先级很高，咱们调整一下代码就能解决。

先看你原来的代码问题：Safari没有重置meter的默认外观，导致你的自定义样式被覆盖，而且它对进度条填充部分的伪类识别也和Chrome不一样。

修改后的完整代码如下：

.my-box{ 
  border: 1px solid indigo; 
  width: 200px; 
  height: 100px; 
  position: relative; 
  overflow: hidden; 
}
.my-box .meter { 
  width: 200px; 
  height: 20px; 
  position: absolute; 
  bottom: -6px;
  /* 关键：重置Safari默认的meter外观 */
  -webkit-appearance: none;
  appearance: none;
}
.my-box .meter::-webkit-meter-bar { 
  background: lavender; 
  border: none; 
}
/* 同时兼容Chrome和Safari的进度条填充样式 */
.my-box .meter::-webkit-meter-optimum-value,
.my-box .meter::-webkit-meter-bar::after {
  background: rebeccapurple;
}

<div class='my-box'> 
  <meter class='meter' min='0' max='1000' value='700'></meter> 
</div>

关键修改点说明： #

• 重置默认外观：给meter加上-webkit-appearance: none和appearance: none，这会彻底清除Safari自带的meter样式，让你的自定义样式能生效。
• 兼容填充样式：Safari中除了::-webkit-meter-optimum-value，还需要用::-webkit-meter-bar::after来匹配进度条的填充部分，同时保留前者可以保证Chrome正常工作。

如果之后你需要处理meter的不同状态（比如低于最优值、危险值），可以分别对::-webkit-meter-suboptimum-value和::-webkit-meter-even-less-good-value做同样的处理，记得在Safari中配合::after伪元素哦。

内容的提问来源于stack exchange，提问作者NbonD