Question

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

的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>

Answer 1

这个怎么样：

select{
  width: 150px;
  height: 30px;
  padding: 5px;
  color: green;
}
select option { color: black; }
select option:first-child{
  color: green;
}

http://jsbin.com/acucan/9

Answer 2

如果要将第一项用作占位符（空值）并且您的选择为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>

Answer 3

您可以使用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; }

Answer 4

我真的很想要这个（占位符在文本框中应该与选择框一样！）并且直接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;
}

Answer 5

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

select:invalid { color:grey; }

所有其他选项：

select:valid { color:black; }

Answer 6

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

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

它需要选项才能有值。

＆＃13;

// The Firebase Admin SDK to access the Firebase Realtime Database. 
const admin = require('firebase-admin');
admin.initializeApp(functions.config().firebase);

＆＃13;

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

＆＃13;

select{
  color: red;
}
select option { color: black; }

＆＃13;

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

6 个答案: