Firefox中如何仅美化select框而不影响下拉选项样式？

这个问题我太熟悉了——Firefox和Chrome在处理<select>内部<option>样式继承上确实有差异，Chrome会保留选项的系统默认样式，但Firefox会让选项继承<select>的背景和文字色，这就导致了你碰到的对比度极低的问题。

解决方案：重置<option>的样式 #

我们只需要给<option>单独设置样式，强制它使用系统默认的背景和文字颜色，就能解决这个问题。修改你的CSS部分，添加针对<option>的样式：

body { background: black; }
select { 
  background-color: rgba(0, 0, 0, 0.15); 
  color: rgba(255, 255, 255, 0.85); 
  border: 1px solid #111417; 
}
/* 重置Firefox中option的样式，回到系统默认 */
select option {
  background-color: buttonface;
  color: buttontext;
}

完整修改后的代码 #

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body { background: black; }
select { 
  background-color: rgba(0, 0, 0, 0.15); 
  color: rgba(255, 255, 255, 0.85); 
  border: 1px solid #111417; 
}
select option {
  background-color: buttonface;
  color: buttontext;
}
</style>
</head>
<body>
<select>
<option value="0">Select car</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
</select>
</body>
</html>

原理说明 #

• buttonface和buttontext是CSS的系统颜色关键字，它们会自动匹配用户系统的默认按钮背景和文字颜色，这样不管用户用的是浅色还是深色系统主题，选项样式都会保持合适的对比度。
• 这个设置只会影响Firefox，因为Chrome本来就不会让<option>继承<select>的样式，所以不会破坏Chrome里的正常表现。

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