如何更改第一个选择选项的文本颜色

Posted 2023-03-11

【中文标题】如何更改第一个选择选项的文本颜色

【英文标题】：How to change the text color of first select option

【发布时间】：2013-07-10 15:21:36

【问题描述】：

我有一个包含多个项目的选择元素。我想更改其第一项的颜色，但似乎颜色只显示 当您单击选择下拉菜单时。我想要的是在页面加载时更改颜色（如灰色），以便用户可以看到第一个选项颜色不同。

请参阅此处的示例... http://jsbin.com/acucan/4/

css:

select
  width: 150px;
  height: 30px;
  padding: 5px;
  color: green;

select option  color: black; 
select option:first-child
  color: green;

html:

<select>
    <option>Item1</option>
    <option>Item2</option>
    <option>Item3</option>
</select>

【问题讨论】：

我不明白你想要达到什么目的。这些项目仅在菜单打开时可见。那么您的解决方案出了什么问题？

Sprottenwels，对不起，我没有把问题说清楚:(

嗨马克西姆，对不起！我尽力在这个网站上搜索......但找不到答案。

这能回答你的问题吗？ How do change the color of the select box's option text?

【参考方案1】：

如果第一项用作占位符（空值）并且您的选择是required，那么您可以使用:invalid 伪类来定位它。

select 
  -webkit-appearance: menulist-button;
  color: black;


select:invalid 
  color: green;

<select required>
  <option value="">Item1</option>
  <option value="Item2">Item2</option>
  <option value="Item3">Item3</option>
</select>

【讨论】：

这也为我着色了列表中的有效选项。我能够使用 select:invalid option:not(:disabled) color: black 规则保持预期的颜色

这是解决这个问题的一个非常聪明的方法！谢谢。完美运行

我们为什么需要-webkit-appearance: menulist-button？

默认外观将忽略颜色变化，因为它使用平台原生样式显示元素。

【参考方案2】：

这个呢：

select
  width: 150px;
  height: 30px;
  padding: 5px;
  color: green;

select option  color: black; 
select option:first-child
  color: green;

<select>
  <option>one</option>
  <option>two</option>
</select>

http://jsbin.com/acucan/9

【讨论】：

太棒了！从来没想过，谢谢:)

选择选项后如何将颜色更改为黑色？

所有<option> 都有color:black 给我。 (Chrome/Mac)

要在 Mac 上的 Webkit 浏览器（Chrome 和 Safari）中使用此功能，您需要使用 -webkit-appearance:none 禁用选择的 chrome。当然，这将启用样式，但也会删除所有其余的选择镶边，因此您还需要重新设置元素中其他所有内容的样式。小提琴：jsfiddle.net/wFP44/1

@sQuijeW 这正是我想知道的。有人对此有任何暗示吗？

【参考方案3】：

对于用作占位符的选项 1：

select:invalid  color:grey; 

所有其他选项：

select:valid  color:black; 

【讨论】：

迄今为止的最佳答案。

【参考方案4】：

这里有一种方法，当您选择一个选项时，它会变黑。当您将其改回占位符时，它会变回占位符颜色（在本例中为红色）。

http://jsfiddle.net/wFP44/166/

它要求选项有值。

$('select').on('change', function() 
  if ($(this).val()) 
return $(this).css('color', 'black');
   else 
return $(this).css('color', 'red');
  
);

select
  color: red;

select option  color: black; 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="">Pick one...</option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>

【参考方案5】：

您可以使用 CSS 来做到这一点：JSFiddle

HTML：

<select>
    <option>Text 1</option>
    <option>Text 2</option>
    <option>Text 3</option>
</select>

CSS：

select option:first-child  color:red; 

或者如果您绝对需要使用 javascript（不建议这样做）：JSFiddle

JavaScript：

$(function() 
    $("select option:first-child").addClass("highlight");
);

CSS：

.highlight  color:red; 

【讨论】：

不幸的是，这些都不能在 Chrome 60 (pc) 中工作，即使添加了 !important 修饰符

【参考方案6】：

我真的很想要这个（文本框的占位符应该和选择框看起来一样！）并且直接的 CSS 在 Chrome 中不起作用。这是我所做的：

首先确保您的选择标签具有.has-prompt 类。

然后在 document.ready 的某个地方初始化这个类。

# Adds a class to select boxes that have prompt currently selected.
# Allows for placeholder-like styling.
# Looks for has-prompt class on select tag.
Mess.Views.SelectPromptStyler = Backbone.View.extend
  el: 'body'

  initialize: ->
    @$('select.has-prompt').trigger('change')

  events:
    'change select.has-prompt': 'changed'

  changed: (e) ->
    select = @$(e.currentTarget)
    if select.find('option').first().is(':selected')
      select.addClass('prompt-selected')
    else
      select.removeClass('prompt-selected')

然后在 CSS 中：

select.prompt-selected 
  color: $placeholder-color;

【讨论】：

它应该如何工作？你能在jsfiddle中做一个例子吗？