Cómo cambiar el color del texto de la primera opción de selección

Question 1

Tengo un elemento de selección que tiene varios elementos. Quiero cambiar el color de su primer elemento, pero parece que el color solo se muestra cuando hace clic en el menú desplegable de selección. Lo que quiero es cambiar el color (como el gris) cuando se carga la página para que los usuarios puedan ver que el color de la primera opción es diferente.

Vea el ejemplo aquí…
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

Si el primer elemento se utilizará como marcador de posición (valor vacío) y su selección es required entonces puedes usar el :invalid pseudo-clase para apuntarlo.

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

¿Qué pasa con esto?

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

Para la Opción 1 utilizada como marcador de posición:

select:invalid { color:grey; }

Todas las demás opciones:

select:valid { color:black; }

Question 5

Aquí tienes una forma para que cuando selecciones una opción, se ponga negra. Cuando lo vuelve a cambiar al marcador de posición, vuelve al color del marcador de posición (en este caso, rojo).

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

Requiere que las opciones tengan valores.

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

Puedes hacer esto usando CSS: JSFiddle

HTML:

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

CSS:

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

O si es absolutamente necesario usar JavaScript (no recomendado para esto): JSFiddle

JavaScript:

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

CSS:

.highlight { color:red; }

Question 7

Tenía muchas ganas de esto (¡los marcadores de posición deberían tener el mismo aspecto para los cuadros de texto que para los cuadros de selección!) Y el CSS directo no funcionaba en Chrome. Aquí esta lo que hice:

Primero asegúrese de que su etiqueta de selección tenga un .has-prompt clase.

Luego inicialice esta clase en algún lugar de 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')

Luego en CSS:

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

Question 8

Este código funciona en Chromium y cambia el color a negro una vez que se selecciona una opción:

select {
  appearance: none;
}

select:invalid {
  color: green;
}

select option {
  color: black;
}

¿Ha sido útil esta solución?