React中自定义meter标签颜色：仅75以上区域设为红色

当前你的<meter>在value超过75时整体变红，是因为webkit浏览器默认会把超过high值的整个填充区域替换为suboptimum-value的颜色。要实现75以下显示蓝色、75以上部分显示红色的分区效果，可以采用双meter叠加的方案，具体步骤如下：

步骤1：修改React代码，添加第二个meter #

在原有meter的基础上，新增一个仅显示超过75部分的红色meter，通过条件渲染控制它的显示：

<div className="climate_icon_and_slider_section">
    <div className='ic_thermometer_and_meter'>
      <img className="ic_thermometer_for_detail_page" src= {ic_thermometer_for_detail_page} />
    
      {/* 蓝色部分：最多填充到75 */}
      <meter 
        max="95" 
        min="45" 
        value={Math.min(temperature_value, 75)} 
        className="meter-blue"
      ></meter>
      {/* 红色部分：仅当value超过75时显示，从75开始填充 */}
      {temperature_value > 75 && (
        <meter 
          max="95" 
          min="75" 
          value={temperature_value} 
          className="meter-red"
        ></meter>
      )}
    </div>
    
    <div className="range-container-climate">
      <input 
        className="range-input" 
        type="range" 
        name="speed" 
        min="45" 
        max="95" 
        value={temperature_value} 
        onChange={handleSliderChange}
      ></input>
    </div>
</div>

步骤2：调整CSS样式，实现叠加效果 #

修改原有meter的CSS，分别设置两个meter的样式，让它们叠加在一起，同时隐藏默认的灰色背景：

.ic_thermometer_and_meter {
  position: relative;
}

.ic_thermometer_for_detail_page {
  height: 300px;
  margin-right: 100px;
  z-index: 10;
  position: absolute;
  top: -140px;
  right: -100px;
}

/* 蓝色meter样式 */
meter.meter-blue {
  width: 265px;
  height: 98px;
  transform: rotate(-90deg);
  position: absolute;
  top: -40px;
  right: -83px;
  z-index: 7;
}
meter.meter-blue::-webkit-meter-bar {
  background: transparent; /* 隐藏默认灰色背景 */
}
meter.meter-blue::-webkit-meter-optimum-value {
  background: #0D76BE; /* 蓝色填充 */
}

/* 红色meter样式 */
meter.meter-red {
  width: 265px;
  height: 98px;
  transform: rotate(-90deg);
  position: absolute;
  top: -40px;
  right: -83px;
  z-index: 8; /* 层级高于蓝色meter，确保红色部分显示在上方 */
}
meter.meter-red::-webkit-meter-bar {
  background: transparent; /* 隐藏默认灰色背景 */
}
meter.meter-red::-webkit-meter-optimum-value {
  background: red; /* 红色填充 */
}

原理说明 #

• 蓝色meter的value被限制为Math.min(temperature_value, 75)，所以最多只会填充到75的位置，显示蓝色。
• 红色meter的min设为75，只有当temperature_value > 75时才渲染，它的填充区域会从75开始到当前value，显示红色。
• 两个meter完全叠加，红色meter的层级更高，最终呈现出75以下蓝色、以上红色的分区效果。

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