如何更改第一個選擇選項的文本顏色

Question

我有一個select元素，它有幾個項目。我想改變它的第一個項目的顏色。但是當你點擊選擇下拉菜單時，顏色似乎只顯示 。我想要的是改變顏色（如顏色灰色） 當頁面被加載，所以用戶可以看到第一個選項顏色改變。

看到這裏的例子... http://jsbin.com/acucan/4/

感謝您的回答！這是我第一次在這裏發表問題。 對不起，我的英語。我希望我明確提出這個問題。

感謝

Answer 1

這個什麼：JSFiddle

HTML：

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

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

您可以通過使用CSS這樣做CSS：

select option:first-child { color:red; } 

或者，如果你確實需要使用JavaScript（不勸此）：JSFiddle

的JavaScript：

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

CSS：

.highlight { color:red; } 

Answer 3

我真的想要這個（佔位符應該看起來像文本框一樣的選擇框es！）和直接的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 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>

Answer 5

如果第一項是用作佔位符（空值），您的選擇是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>