Select 使用透明背景和白色文本会导致选项在 Chrome 中不可见

Question

在 Chrome 中使用带有白色文本和透明背景的 select 元素时似乎存在问题。它会导致除 selected 选项之外的所有选项都不可见（白色背景上的白色文本）。我该如何解决这个问题？

示例：

html, body {
  background: black;
}

select {
  background: transparent;
  color: white;
}

<select>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Answer 1

您可以在 select 选项中为文本设置不同的颜色

html, body {
  background: black;
}

select {
  background: transparent;
  color: white;
}

#mySelect *{
  color: black;
}

<select id='mySelect'>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Select with transparent background and white text causes options to be invisible in Chrome