web-dev-qa-db-ja.com

最初の選択オプションのテキストの色を変更する方法

複数のアイテムを持つselect要素があります。最初のアイテムの色を変更したいのですが、選択ドロップダウンをクリックすると色が表示されるようです。私が欲しいのは、ページがロードされたときに色（グレーなど）を変更して、ユーザーが最初のオプションの色が異なることを確認できるようにすることです。

こちらの例をご覧ください... 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>
cssselectinput
22
konekoya

これはどうですか：

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

http://jsbin.com/acucan/9

20
jzm

最初の項目がプレースホルダー（空の値）として使用され、選択が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>
12
Oscar Barrett

これを行うには、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; }
1
glautrou

私はこれを本当に望んでいました（プレースホルダーは選択ボックスとテキストボックスで同じように見えるはずです！）、そしてまっすぐな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;
}
1
smoyth

オプションを選択すると、オプションが黒くなります。プレースホルダーに戻すと、プレースホルダーの色（この場合は赤）に戻ります。

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>
0
Chloe