So ändern Sie die Textfarbe der ersten Auswahloption

Question 1

Ich habe ein ausgewähltes Element, das mehrere Elemente enthält. Ich möchte die Farbe des ersten Elements ändern, aber anscheinend wird die Farbe nur angezeigt, wenn Sie auf das Auswahl-Dropdown klicken. Was ich möchte, ist, die Farbe (wie Grau) zu ändern, wenn die Seite geladen wird, damit Benutzer sehen können, dass die erste Optionsfarbe anders ist.

Siehe Beispiel hier…
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>

Question 2

Wenn das erste Element als Platzhalter (leerer Wert) verwendet werden soll und Ihre Auswahl ist required dann kannst du die verwenden :invalid Pseudo-Klasse, um darauf abzuzielen.

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>

Question 3

Was ist damit:

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

Question 4

Für Option 1 als Platzhalter verwendet:

select:invalid { color:grey; }

Alle anderen Optionen:

select:valid { color:black; }

Question 5

Hier ist eine Möglichkeit, damit eine Option schwarz wird, wenn Sie sie auswählen. Wenn Sie es wieder in den Platzhalter ändern, nimmt es wieder die Platzhalterfarbe an (in diesem Fall rot).

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

Es erfordert, dass die Optionen Werte haben.

$('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>

Question 6

Sie können dies tun, indem Sie CSS verwenden: JSFiddle

HTML:

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

CSS:

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

Oder wenn Sie unbedingt JavaScript verwenden müssen (dafür nicht empfohlen): JSFiddle

Javascript:

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

CSS:

.highlight { color:red; }

Question 7

Ich wollte das wirklich (Platzhalter sollten für Textfelder genauso aussehen wie Auswahlfelder!) und reines CSS funktionierte in Chrome nicht. Folgendes habe ich getan:

Stellen Sie zunächst sicher, dass Ihr ausgewähltes Tag ein hat .has-prompt Klasse.

Dann initialisieren Sie diese Klasse irgendwo in 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')

Dann im CSS:

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

Question 8

Dieser Code funktioniert auf Chromium und ändert die Farbe in Schwarz, sobald eine Option ausgewählt ist:

select {
  appearance: none;
}

select:invalid {
  color: green;
}

select option {
  color: black;
}