Jak zmienić kolor tekstu opcji pola wyboru?

Próbuję zmienić kolor pierwszej opcji na szary kolor, który tylko tekst (wybierz jedną opcję), ale tutaj to nie działa tutaj:Jak zmienić kolor tekstu opcji pola wyboru?

.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>

Moja jsfiddle jest tutaj jsfiddle

Źródło

2011-12-26 Anonymous

co na ten temat? http://jsfiddle.net/hUpAB/1/ –

Możliwe, że po prostu całkowicie ukryjesz pierwszą opcję: http://stackoverflow.com/questions/9447134/html-select-how-to-set-default- tekst-który-nie-będzie-pokaz-w-drop-down-lista – Zook

Suresh, nie potrzebujesz niczego używać w swoich kodach. Co trzeba to po prostu coś takiego:

.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>

Ale jak widać, bo Twoja pierwsza pozycja w opcji jest pierwszą rzeczą, że wybierz pokazy kontroli, nie można zobaczyć jej przypisany kolor. Gdy otworzysz listę wyboru i zobaczysz otwarte pozycje, zobaczysz, że możesz przypisać szary kolor do pierwszej opcji. Potrzebujesz więc czegoś jeszcze w 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'); 
     } 
    }); 
});

To jest mój kod w jsFiddle.

Źródło

2011-12-26 11:43:51

cześć podałeś odpowiedź za dokładnie to, co chcę, dziękuję bardzo :) :) –

Serdecznie zapraszamy Suresh –

Mimo że działa idealnie na PC (nawet przy zmianie rozmiaru ekranu). To nie zadziałało na moim telefonie HTC jeden, a obecnie około 40% przeglądania jest przez smartfony. Więc uważaj. – rosh3000

wystarczy dodać disabled jako atrybut option

<option disabled>select one option</option>

Źródło

2011-12-26 11:33:26 Simone

:) +100! Już miałem napisać tę samą odpowiedź! Ponieważ jest to tak oczywiste, że OP próbuje uzyskać –

Używaj tego tylko dla wymaganych pól. Dzięki temu użytkownik nie może wyczyścić wartości bez ponownego załadowania formularza. –

Spróbuj tylko to bez metki przęsła:

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

Dla większej elastyczności można użyć dowolnego widgetu JS.

Źródło

2011-12-26 11:33:36

Nie można mieć kod HTML wewnątrz opcji, mogą zawierać tylko tekst, ale można zastosować klasę do opcji Zamiast:

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

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

Uwaga:

Obsługa opcji stylizacji różni się w zależności od przeglądarki. We współczesnych przenośnikach zwykle można oczekiwać obsługi kolorowania, ale nie rozmiaru czcionki. Na przykład przeglądarka w telefonie zwykle nie wyświetla opcji w menu rozwijanym, więc stylizacja nie byłaby istotna.
Nie powinieneś mieć tagów html i head w kodzie HTML w jsfiddle.
Powinieneś nazwać swoje zajęcia tym, co reprezentują, a nie jak wyglądają.

Źródło

2011-12-26 11:56:11 Guffa

to nie zmienia koloru na szary "wybierz jedną opcję" podczas ładowania strony. jak to zrobić? – Matoeil

@Matoeil: Spróbuj ustawić kolor elementu 'select'. – Guffa

Niedawno miałem problemy z tym samym problemem i znalazłem naprawdę proste rozwiązanie.

Wszystko, co musisz zrobić, to ustawić pierwszą opcję wyłączoną i wybraną.Tak:

<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>

Spowoduje to wyświetlenie pierwszej opcji (szary) wtedy, gdy strona jest ładowana. Zapobiega to także wybraniu użytkownika po kliknięciu na liście.

Źródło

2012-09-05 11:04:06 Mystikmyshel

Jednak powinno to być używane tylko w przypadku wymaganych pól. Jeśli jest to pole opcjonalne, użytkownik nie może zresetować go do żadnego wyboru. –

to nie działa na chrome dla mnie – Fabio

Oto moje demo z 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/

Źródło

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>

To wszystko brzmiało jak dużo ciężkiej pracy dla mnie, kiedy optgroup daje Ci to, czego potrzebujesz - przynajmniej tak myślę.

Źródło

2017-06-12 17:04:01 PureChocolate

-1

prostu użyć tagu rozpiętości

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

I to ona

Źródło

2018-01-24 18:31:33

ok to jest bezużyteczne, przepraszam, moje złe! –

Jak zmienić kolor tekstu opcji pola wyboru?

Odpowiedz

Powiązane problemy