web-dev-qa-db-fra.com

Comment changer la couleur du texte de la première option de sélection

J'ai un élément select qui a plusieurs éléments. Je veux changer la couleur de son premier article. Mais il semble que la couleur ne montre que Lorsque vous cliquez sur le menu déroulant de sélection. Ce que je veux, c’est la couleur changée (comme la couleur gris) Lorsque la page est chargée afin que les utilisateurs puissent voir la première couleur d’option modifiée.

Voir l'exemple ici ... http://jsbin.com/acucan/4/

Merci d'avoir répondu! C'est la toute première fois que je poste une question ici… .. Désolé pour mon anglais. J'espère que je clarifie la question. 

Merci

cssselectinput
20
konekoya

Et ça:

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

Si le premier élément doit être utilisé comme espace réservé (valeur vide) et que votre sélection est required, vous pouvez utiliser la pseudo-classe :invalid pour le cibler.

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

Vous pouvez le faire en utilisant CSS: JSFiddle

HTML:

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

CSS:

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

Ou si vous devez absolument utiliser JavaScript (pas conseillé): JSFiddle

JavaScript:

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

CSS:

.highlight { color:red; }
1
glautrou

Je le voulais vraiment (les espaces réservés devraient ressembler aux zones de texte!) Et les CSS simples ne fonctionnaient pas dans Chrome. Voici ce que j'ai fait:

Premièrement, assurez-vous que votre balise select a une classe .has-Prompt.

Puis initialisez cette classe quelque part dans 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')

Puis en CSS:

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

Voici un moyen pour que lorsque vous sélectionnez une option, elle devient noire. Lorsque vous rétablissez ce paramètre dans l'espace réservé, il revient à la couleur de l'espace réservé (dans ce cas, le rouge).

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

Cela nécessite que les options aient des valeurs.

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