Dün twitter’da aşağıdaki konuyu tartışırken

Konu Uğur‘un da cevabıyla dosya yükleme elemanına geldi.

Ben de çözüm için ::file-selector-button pseudo elemanından bahsettim. Uğur tam ikna olmadı. Bence tam olmasa da çözüm olması güzel. :) Bu konuyu yazayım da bir yerde not olarak kalsın dedim.

Dosya yükleme butonuna stil verme

Dosya upload işini görmek için; input elementine file özniteliği vermemiz yeterli.

<input type="file" />

Bu kadar kolay. Ancak buradaki sorunumuz bu tanım ile gelen buton ve yazıya müdahele edip stillendiremiyorduk. Standart şeklideki kodumuz aşağıdaki gibi görünüyor.

Böyle olunca bu butonu görünmez yapıp kendi istediğimiz stili uyguluyorduk.

Yakın zamanda gelen ::file-selector-button pseudo elemanı sayesinde artık butona stil verebiliyoruz.

Şurada gördüğüm bir örnek dosya yükleme örneğini yapayım dedim.

::file-selector-button pseudo elemanının tarayıcı desteği de gayet iyi.

Kullandığımız elemanların (şimdilerde daha sık kullandığımız adıyla komponent) HTML eleman olarak kodlamak bize birçok bakımdan avantaj sağlıyor. Tabi HTML elemanlarının bize yeterince stillerini değiştirme imkanı vermesi önemli yoksa yine alternatif çözüm yollarına başvurmak zorunda kalırız.

Kalın sağlıcakla.

Kaynaklar

Avatar Popout Efekti

Avatar Popout Efekti uygulaması Devamını oku

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.

Renk geçişli ve Hareketli kenar çizgileri

22 January 2024 tarihinde yayınlandı.