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

:focus-within tanımı

:focus-within sözde sınıfı Devamını oku

scroll-behavior

26 September 2022 tarihinde yayınlandı.

Çalışma Ortamımda Ergonomik Güncellemeler

22 September 2022 tarihinde yayınlandı.