CSS ile File Input Tasarımı

Webkit devreye girmeden önce ne yazık ki işin CSS tarafında file inputlarına müdahale edemiyorduk. Bu yüzden birçok tasarımcı, perdeleme yöntemiyle file inputun üzerine şık bir tasarım koyup asıl çalışan fonksiyonu altta gizliyordu. Ancak pseudo seçicileri sayesinde artık bu mümkün. Birçok güncel tarayıcının desteklediği bu selector tanımları Internet Explorer tarafında desteği 9+ versiyonlarda buluyor.

Bu makalemizde -webkit-file-upload-button ve -ms-browse tanımları sayesinde input[type=file] bir öğeye stil atayacağız.

ÖRNEĞİ GÖRÜNTÜLE

File Input CSS

Bu tip bir input yapısına tanımlanan CSS sadece açıklama metnine etki etmekte. Buton bu stillerden etkilenmemekte. İşte burada devreye -webkit-file-upload-button ve -ms-browse giriyor. İşte klasik bir file inputuyla stilize edilmiş halinin farkı:

Nasıl çalışır?

Öncelikle işin HTML tarafında bir file inputu oluşturalım.

<input type="file">

Şimdi de CSS kodlarımızı ekleyelim.

input[type="file"] {
  cursor: pointer !Important;
  font: 300 14px sans-serif;
  color:#9e9e9e;
}
input[type="file"]::-webkit-file-upload-button
{
  font: 300 14px  sans-serif;
  background: #009688;
  border: 0;
  padding: 12px 25px;
  cursor: pointer;
  color: #fff;
  text-transform: uppercase;
}

input[type="file"]::-ms-browse {
  font: 300 14px 'Roboto', sans-serif;
  background: #009688;
  border: 0;
  padding: 12px 25px;
  cursor: pointer;
  color: #fff;
  text-transform: uppercase;
}

Böylece perdeleme tekniği kullanmadan file inputunu stilize etmiş olduk.

Bitirmeden önce..

Buradaki dikkat çeken unsur, her iki öğenin aynı tanımlara sahip olması ve birleştirilemez olması. Normalde CSS tanımlarını virgül ile duplicate edip, aynı kodları birden fazla kez yazma işinden kurtuluyorduk. Ancak bu yapıda çalışmıyor. Belki yorum alanında bu konuda bizi aydınlatmak istersiniz.

İyi çalışmalar.