css-file-input-design
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.

Öğreni görüntülemek için tıklayın.

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ı:

file-input

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.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

You May Also Like
davutabi.com cssde important tanimi
Daha Fazla

Css’de !important Tanımı

!important’ı anlamak için CSS etkinliğine bir göz atmalısınız. CSS’de etkinlik tanımını tekrar hatırlatalım; CSS’de etkinliğin anlamı stil çatışması(aynı…
Daha Fazla

CSS ile Dikey Ortalama

Bazen yüksekliği değişken olan bir nesnenin içerisindeki değerleri dikey olarak ortalamamız gerekir.. Normal şartlarda vertical-align ile dikey ortalama…