webentwicklung-frage-antwort-db.com.de

So ändern Sie die Textfarbe der ersten Auswahloption

Ich habe ein select-Element mit mehreren Elementen. Ich möchte die Farbe des ersten Elements ändern. Es scheint jedoch, dass die Farbe nur Zeigt, wenn Sie auf die Auswahlliste klicken. Was ich möchte, ist die Farbe (wie die Farbe Grau) , Wenn die Seite geladen wird, sodass die erste Optionsfarbe geändert werden kann.

Siehe das Beispiel hier ... http://jsbin.com/acucan/4/

Danke für die Antwort! Es ist das erste Mal, dass ich hier eine Frage posten ... Entschuldigen Sie mein Englisch. Ich hoffe, dass ich die Frage klarstellen kann. 

Vielen Dank

20
konekoya

Was ist mit diesem:

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

Wenn das erste Element als Platzhalter verwendet werden soll (leerer Wert) und Ihre Auswahl required ist, können Sie die :invalid-Pseudoklasse als Ziel verwenden.

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>

6
Oscar Barrett

Sie können dies mit CSS tun: 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 (nicht empfohlen): JSFiddle

JavaScript:

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

CSS:

.highlight { color:red; }
1
glautrou

Ich wollte das wirklich (Platzhalter sollten bei Auswahlfeldern genauso aussehen wie Auswahlfelder!) Und CSS in CSS funktioniert nicht. Folgendes habe ich getan:

Stellen Sie zunächst sicher, dass Ihr select-Tag eine .has-Prompt-Klasse hat.

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 in CSS:

select.Prompt-selected {
  color: $placeholder-color;
}
1
smoyth

Wenn Sie eine Option auswählen, wird sie schwarz. Wenn Sie es wieder in den Platzhalter umwandeln, wird wieder die Platzhalterfarbe (in diesem Fall Rot) angezeigt.

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

Es erfordert die Optionen, um Werte zu 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>

0
Chloe