CSS3 Genişleyen Input

[L34DRi]

Kod: Tümünü Seç Tümünü Kopyala

.ara{ /* Input classımızın adı ara */
    transition: width 0.8s; /* Genişliğin artışı 0.8 saniyede gerçekleşecek */
    width: 120px; /* Normal genişliğimiz 120 pixel */
    }
    .ara:focus{ /* Odaklandığımızda... */
    width: 200px; /* Odaklanıldığında genişliği 200pixel olacak */
    }

    .ara2{ /* Bu yukarıdakinin biraz daha şekillisi */
    transition: width 0.8s;
    width: 120px;
    border-radius: 6px;
    background: url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/11_Search-24.png) no-repeat;
    height:30px;
    background-position:90px;
    }
    .ara2:focus{
    width: 200px;
    border: 2px solid #000;
    background-position:170px;
    }

Herkese selamlar,



Yukarıdaki css kodlarını eklediğiniz sitenizde input larınızın class larını ara veya ara2 yaptığınızda demodaki gibi inputlara odaklanınca genişliği artacaktır.Gerekli açıklamaları kod içerisinde yaptım.



DEMO

[Namikaze]

Çok teşekkürler paylaşım için :)

[Ripbyrustavi]

çok iyi bir kod olmuş ellerine sağlık hocam :)

[next155]

Yeni Temamda Kullanacağım Şefim Teşekkürler :)

[MonsteR]

çok güzel teşekkürler

[srdrylmz]

iyi güzelde aramıyor ki

[L34DRi]

Yorumlarınız için teşekkürler.Fikir benim değil bir sitede gördüm kodunu yazdım.

iyi güzelde aramıyor ki

Aramaz zaten çünkü ben sadece css kodunu verdim.Araması için forumda bulunan arama input ına class değeri olarak ara2/ara (ya da ne olarak belirlediyseniz) girmeniz gerekir.

Yani bu sadece olayın görsel sunumu, bir demo...

[srdrylmz]

özr dilerim o zmn

[L34DRi]

özr dilerim o zmn

Özür dilemenin ne gereği vardı ki :)