HTML5 ile beraber gelen yeniliklerden biride color input türüdür bu input ile kullanıcıdan renk seçimi yapmasını sağlayabiliyoruz. Makalenin devamında hangi tarayıcılarda çalıştığı ve çalışmayan tarayıcılar için ne yapılacağı anlatılmıştır.
HTML5 Color Input’u ile Renk Seçim Paleti Kullanımı
Renk seçim paletini kullanmak HTML5 ile gerçekten çok basit alttaki kodu kullanarak renk seçimi için gereken paleti açabilirsiniz office veya paint kullandıysanız daha önce aynı renk paletinin açıldığını göreceksiniz bu paletten seçim yapıldıktan sonra seçilen renk input nesnesinin value özelliğine aktarılacak ve buton üzerindeki renk değişecek alttaki sonuç kısmından deneyerek görebilirsiniz.
HTML
1 | <input type="color" /> |
Sonuç
Eğer tarayıcınız color input türünü desteklemiyorsa boş bir giriş nesnesi çıkacaktır. Renk seçicisinin varsayılan olarak gözüken rengi siyahtır hex karşılığı ise #000000 ‘dır.
Kendiniz varsayılan olarak color input‘una değer atamak için alttaki gibi value değerini değiştirerebilirsiniz. Ben alttaki kod ile renk seçicisinin varsayılan değerini kırmızı renge karşılık gelen #ff0000 hex kodunu yazdım.
HTML
1 | <input type="color" vale="#ff0000" /> |
Sonuç
Input color türünü desteklemeyen tarayıcılar için farklı bir renk seçim ekranı sunabilmek için buradaki jQuery kütüphanesini kullanabilirsiniz.
