Bir 'select' kutusu için nasıl yer tutucu oluşturabilirim?

Metin girişleri için yer tutucular kullanıyorum ve bu da gayet iyi çalışıyor. Ancak seçme kutularım için de bir yer tutucu kullanmak istiyorum. Tabii ki bu kodu kullanabilirim:

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

Ancak 'Seçeneğinizi seçin' açık gri yerine siyah renkte. Bu yüzden çözümüm muhtemelen CSS tabanlı olabilir. jQuery de iyidir.

Bu, seçeneği yalnızca açılır menüde gri yapar (yani oka tıkladıktan sonra):

option:first {
    color: #999;
}

Soru şu: İnsanlar seçim kutularında yer tutucuları nasıl oluşturuyor? Ama zaten cevaplanmış, teşekkürler.

Ve bunu kullanmak, seçilen değerin her zaman gri olmasına neden olur (gerçek bir seçenek seçildikten sonra bile):

select {
    color: #999;
}
Çözüm

CSS olmayan bir cevap - JavaScript/jQuery yok:


<select>
    Select your option
    Durr
Yorumlar (20)

Bu soruyla yeni karşılaştım ve işte Firefox ve Chrome'da (en azından) çalışan şey:



    select:invalid { color: gray; }


    <select required>
        Please Choose...
        Open when powered (most valves do this)
        Closed when powered, auto-opens when power is cut
Yorumlar (15)

Bunun gibi bir şey:

HTML:


<select id="choice">
    Choose...
    Something
    Something else
    Another choice
Yorumlar (4)