Come si cambia il colore del testo dell'opzione della casella di selezione?

Sto cercando di cambiare il colore della prima opzione di colore grigio, che solo il testo (selezionare un'opzione) ma qui non funziona qui:Come si cambia il colore del testo dell'opzione della casella di selezione?

.grey_color { 
 
    color: #ccc; 
 
    font-size: 14px; 
 
}

<select id="select"> 
 
    <option selected="selected"><span class="grey_color">select one option</span></option> 
 
    <option>one</option> 
 
    <option>two</option> 
 
    <option>three</option> 
 
    <option>four</option> 
 
    <option >five</option> 
 
</select>

mio jsfiddle è qui jsfiddle

fonte

2011-12-26 Anonymous

che dire di questo? http://jsfiddle.net/hUpAB/1/ –

Si potrebbe anche voler semplicemente nascondere la prima opzione interamente: http://stackoverflow.com/questions/9447134/html-select-how-to-set-default- text-which-wont-be-shown-in-drop-down-list – Zook

Suresh, non è necessario utilizzare nulla nei codici. Quello che vi serve è proprio qualcosa di simile:

.others { 
 
    color:black 
 
}

<select id="select"> 
 
    <option style="color:gray" value="null">select one option</option> 
 
    <option value="1" class="others">one</option> 
 
    <option value="2" class="others">two</option> 
 
</select>

Ma, come si può vedere, perché il vostro primo elemento nelle opzioni è la prima cosa che i vostri spettacoli selezionati di controllo, non è possibile vedere la sua colore assegnato. Mentre se apri la lista di selezione e vedi gli oggetti aperti, vedrai che potresti assegnare un colore grigio alla prima opzione. Quindi hai bisogno di qualcos'altro in jQuery.

$(document).ready(function() { 
    $('#select').css('color','gray'); 
    $('#select').change(function() { 
     var current = $('#select').val(); 
     if (current != 'null') { 
      $('#select').css('color','black'); 
     } else { 
      $('#select').css('color','gray'); 
     } 
    }); 
});

Questo è il mio codice in jsFiddle.

fonte

2011-12-26 11:43:51

Ciao hai dato risposta per esattamente quello che voglio, grazie mille :) :) –

Prego Suresh –

Anche se funziona perfettamente sul PC (anche con lo schermo ridimensionato). Non funzionava sul mio HTC One phone e oggi circa il 40% della navigazione avviene tramite smartphone. Perciò stai attento. – rosh3000

Hai solo bisogno di aggiungere disabled come attributo option

<option disabled>select one option</option>

fonte

2011-12-26 11:33:26 Simone

:) +100! Stavo per scrivere la stessa risposta! Perché è così ovvio il risultato che l'OP sta cercando di raggiungere –

Usalo solo per i campi obbligatori. Ciò rende impossibile all'utente cancellare il valore senza ricaricare il modulo. –

provare solo questo senza il tag span:

<option selected="selected" class="grey_color">select one option</option>

Per maggiore flessibilità, è possibile utilizzare qualsiasi widget di JS.

fonte

2011-12-26 11:33:36

Non si può avere il codice HTML all'interno delle opzioni, che possono contenere solo testo, ma è possibile applicare la classe per l'opzione invece:

<option selected="selected" class="grey_color">select one option</option>

Demo: http://jsfiddle.net/Guffa/hUpAB/9/

Nota:

Il supporto per le opzioni di stile varia a seconda del browser. Nelle moderne broser generalmente prevedi il supporto per la colorazione ma non per le dimensioni dei caratteri. Ad esempio, un browser di un telefono non visualizza le opzioni in un menu a discesa, quindi lo stile non sarebbe affatto pertinente.
Non dovresti avere tag html e head nel codice HTML in jsfiddle.
Dovresti nominare le tue classi per ciò che rappresentano, non per come appaiono.

fonte

2011-12-26 11:56:11 Guffa

questo non colora in grigio la "seleziona un'opzione" quando si carica la pagina. Come si può fare? – Matoeil

@Matoeil: prova a impostare il colore dell'elemento 'select'. – Guffa

Recentemente ho avuto problemi con questa stessa cosa e ho trovato una soluzione davvero semplice.

Tutto ciò che dovete fare è impostare la prima opzione su disabilitato e selezionato.Come questo:

<select id="select"> 
 
    <option disabled="disabled" selected="selected">select one option</option> 
 
    <option>one</option> 
 
    <option>two</option> 
 
    <option>three</option> 
 
    <option>four</option> 
 
    <option>five</option> 
 
</select>

Questo mostrerà la prima opzione (grigio) quando la pagina viene caricata. Inoltre impedisce all'utente di essere in grado di selezionarlo dopo aver fatto clic sull'elenco.

fonte

2012-09-05 11:04:06 Mystikmyshel

Tuttavia, questo deve essere utilizzato solo per i campi richiesti. Se è un campo facoltativo, l'utente non può reimpostarlo su nessuna selezione. –

questo non funziona su chrome per me – Fabio

Ecco il mio demo con jQuery

<!doctype html> 
<html> 
<head> 
<style> 
    select{ 
     color:#aaa; 
    } 
    option:not(first-child) { 
     color: #000; 
    } 
</style> 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $("select").change(function(){ 
      if ($(this).val()=="") $(this).css({color: "#aaa"}); 
      else $(this).css({color: "#000"}); 
     }); 
    }); 
</script> 
<meta charset="utf-8"> 
</head> 
<body> 
<select> 
    <option disable hidden value="">CHOOSE</option> 
    <option>#1</option> 
    <option>#2</option> 
    <option>#3</option> 
    <option>#4</option> 
</select> 
</body> 
</html>

https://jsfiddle.net/monster75/cnt73375/1/

fonte

2016-10-15 12:19:21 Fabio

<select id="select"> 
 
    <optgroup label="select one option"> 
 
     <option>one</option> 
 
     <option>two</option> 
 
     <option>three</option> 
 
     <option>four</option> 
 
     <option>five</option> 
 
    </optgroup> 
 
</select>

Sembrava tutto come un sacco di duro lavoro per me, quando optgroup ti dà quello che ti serve - Almeno penso che lo faccia.

fonte

2017-06-12 17:04:01 PureChocolate

-1

basta usare il tag span

<option value="" disabled selected ><span style="color:grey;">Select Category...</span></option>

E questo è tutto

fonte

2018-01-24 18:31:33

ok questo è inutile scusate ragazzi mio male! –

Come si cambia il colore del testo dell'opzione della casella di selezione?

risposta

Problemi correlati