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;
}
Bu soruyla yeni karşılaştım ve işte Firefox ve Chrome'da (en azından) çalışan şey:
<style>
select:invalid { color: gray; }
</style>
<form>
<select required>
<option value="" disabled selected hidden>Please Choose...</option>
<option value="0">Open when powered (most valves do this)</option>
<option value="1">Closed when powered, auto-opens when power is cut</option>
</select>
</form>
Devre Dışı* seçeneği, <option>
seçeneğinin hem fare hem de klavye ile seçilmesini durdururken, sadece 'display:none'
seçeneğini kullanmak kullanıcının klavye oklarıyla seçim yapmaya devam etmesini sağlar. display:none'` stili sadece liste kutusunun 'güzel' görünmesini sağlar.
Not: "placeholder" seçeneğinde boş bir value
özniteliğinin kullanılması, doğrulamanın (gerekli öznitelik) "placeholder" seçeneğinin etrafında çalışmasını sağlar, bu nedenle seçenek değiştirilmezse, ancak gerekliyse, tarayıcı kullanıcıdan listeden bir seçenek seçmesini istemelidir.
Güncelleme (Temmuz 2015):
Bu yöntemin aşağıdaki tarayıcılarda çalıştığı onaylanmıştır:
Güncelleme (Ekim 2015):
Geniş bir desteğe sahip olan hidden
HTML5 özelliği lehine style="display: none"
özelliğini kaldırdım. Gizli öğe, Safari, Internet Explorer'da (Project Spartan'ın kontrol etmesi gerekiyor) seçenek'in açılır menüde görünür olduğu, ancak seçilebilir olmadığı
display: none` ile benzer özelliklere sahiptir.
Güncelleme (Ocak 2016):
Selectöğesi
requiredolduğunda,
selectöğesini "placeholder" durumundayken biçimlendirmenize olanak tanıyan
:invalidCSS sözde sınıfının kullanılmasına izin verir. Burada
:invalid,
option` yer tutucusundaki boş değer nedeniyle çalışır.
Bir değer ayarlandıktan sonra, :invalid
sözde sınıfı bırakılacaktır. İsterseniz isteğe bağlı olarak :valid
de kullanabilirsiniz.
Çoğu tarayıcı bu sözde sınıfı destekler. Internet Explorer 10 ve üstü. Bu, özel stillere sahip seç
öğeleriyle en iyi şekilde çalışır; bazı durumlarda, örneğin (Chrome / Safari'de Mac) seç
kutusunun varsayılan görünümünü değiştirmeniz gerekir, böylece arka plan rengi' ve
renk' gibi belirli stiller görüntülenir. Uyumlulukla ilgili bazı örnekleri ve daha fazlasını developer.mozilla.org adresinde bulabilirsiniz.
Chrome'da yerel öğe görünümü Mac:
Chrome'da değiştirilmiş kenarlık öğesi Mac'i kullanma:
Bunun gibi bir şey:
HTML:
<select id="choice">
<option value="0" selected="selected">Choose...</option>
<option value="1">Something</option>
<option value="2">Something else</option>
<option value="3">Another choice</option>
</select>
CSS:
#choice option { color: black; }
.empty { color: gray; }
JavaScript:
$("#choice").change(function () {
if($(this).val() == "0") $(this).addClass("empty");
else $(this).removeClass("empty")
});
$("#choice").change();
Çalışma örneği: