相同HTML文件的select下拉菜单在两台设备Edge浏览器中颜色不同如何解决

出现显示差异的原因 #

两台设备上的Edge浏览器生效的主题配色不同，原生select下拉菜单属于浏览器内置控件，无自定义样式时默认会继承浏览器/系统的主题规则：

• 其中一台设备的系统或Edge浏览器启用了浅色主题，空select的下拉面板就默认渲染为白色背景
• 另一台设备的系统或Edge浏览器启用了暗色主题，空select的下拉面板就默认渲染为黑色背景

因为你使用的是无option的空select，没有自定义内容覆盖默认渲染规则，所以完全由浏览器原生主题决定显示效果。

将黑色背景改为白色的方法 #

方法一：调整设备主题配置（无需修改代码） #

• 打开Edge浏览器的「设置」-「外观」页面，把主题选项从「暗色」或「跟随系统」改为「浅色」，保存后刷新页面即可生效
• 如果浏览器设置的是跟随系统，也可以直接把操作系统的全局主题切换为浅色模式，Edge会同步变更配色。

方法二：添加CSS样式强制统一显示效果（修改代码，全设备生效） #

直接给select控件添加固定样式，覆盖浏览器原生的主题渲染规则：

/* 强制select控件背景为白色，文字为黑色 */
select {
  background: #fff;
  color: #000;
}
/* 兼容后续添加option的场景，统一option的背景色 */
select option {
  background: #fff;
  color: #000;
}

如果需要完全屏蔽浏览器暗色主题对页面的影响，可以在HTML的<head>标签中加入以下meta声明：

<meta name="color-scheme" content="light">

添加后页面所有原生控件都会默认使用亮色模式的配色渲染，不受浏览器主题影响。

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