CSS格式化选定的选项

Question

我有这样的表格： link to form page（页面底部的表格）

问题在于下拉菜单。当您单击其中一个下拉菜单时，您会看到我想要的黑色文本以及那些样式，例如，.revenue-select option {color: #111111 !important;}

问题是一旦选择了一个选项，文本颜色将恢复为灰色，我希望该文本对于不是第一个占位符选项的所选项目是黑色的。

请推荐我如何用CSS解决这个问题。谢谢你的帮助。

Answer 1

准备好长时间阅读。所以，我对此感到好奇并开始在不同的浏览器上试用它。事实证明，由于option被视为replaced element，因此您可以设置样式的范围：checked pseudo class是有限的。
您可以对option进行样式设置的程度也是有限的，并且浏览器的浏览器也各不相同。我能够通过反复试验在OS X和Windows上的多个浏览器上试用它，从而找到适用于大多数浏览器的解决方案（包括CSS和JS）。我还发现color或select上的option在您更改background-color之前没有任何效果。我不确定这是一个错误，还是设置bgcolor会触发内部可能导致color被考虑的内容。

1. 样式select。这将更改所有选项的颜色和显示的选定值。
2. 样式option。这将更改您在下拉列表中看到的所有选项的颜色。此时，您将显示的选定值设置为一种颜色（上图），下拉菜单中的其余项目设置为另一种颜色。
3. （可选）样式选项：选中。这将是下拉列表中的选定选项（与1不同）。正如下面的评论中所提到的，这在Firefox中是不受支持的，所以我们将继续在JS中另外设置样式
＆＃13;
＆＃13;
$('select').change(() => {

   /* to reset all but selected back to gray
   ** Support: OSX: FF. Not on Chrome/Safari
   ** Windows: FF, Chrome, Edge. Not on IE.
   */ 
   $('option').css('color','gray');
 
   /* Support on MacOSX: FF only (not on Chrome/Safari)
   ** Windows: Chrome, FF and Edge. (not on IE)
   ** Adding this for FF support on both platforms
   */
  $('option:selected').css('color', 'blue');
});
＆＃13;
/* 'color' on select & option doesn't work on most browsers
** (Eg: Chrome on Mac OSX) as is.
** Works if you add a background-color along with it. WEIRD.
** PS: This also changes the default look of the select a bit
*/

select {
  background-color: white;
  color: blue;
}

option {
  background-color: white;
  color: gray;
}

/* Add this only if you need to change
** the color of the option text in the dropdown
** Doesnt work on Chrome/FF/Safari on Mac OSX
** Works on Chrome, IE & Edge on Windows
*/

option:checked {
  color: blue;
}
＆＃13;
<select>
  <option class="color" name="city">Tokyo</option>
  <option class="color" name="city">New York</option>
  <option class="color" name="city">London</option>
  <option class="color" name="city">Paris</option>
</select>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
＆＃13;
＆＃13;
＆＃13;