Türkiye'nin en kullanışlı kodcu forumu, en baba kodcular burda !

Yeni özellik: Gönderinize jsfiddle kodu ekleyebilirsiniz.
Bilgi: Bu forum Türkiye'nin en kullanışlı kodcu forumudur. Forum içerisindeki davranış ve paylaşımlarınız moderatörler tarafından izlenmektedir.

Moderatör: mctr

 
Kullanıcı avatarı
Sonic Clown
Üye
Üye
Mesajlar: 3
Kayıt: 26 Haz 2017, 02:46:33
x 3

Tıklayınca Genişleyen Arama Kutusu [HTML/CSS]

26 Haz 2017, 14:11:39

HTML
<div class="searchbox">
   <input type="text" name="search" placeholder="ara bulucu...">
</div>


CSS
.searchbox{
   float: right;
   margin-top: 10px;
   margin-right: 59px;
}
input[type=text] {
   float: right;
   width: 170px;
   -webkit-transition: width 0.4s ease-in-out;
   transition: width 0.4s ease-in-out;
   background-color: white;
   background-image: url("images/searchicon.png");
   background-position: 5px 3px;
   background-repeat: no-repeat;
   border: 2px solid #b8b8b8;
   border-radius: 4px;
   box-sizing: border-box;
   font-size: 16px;
   transition: width 0.4s ease-in-out;
   overflow: visible;
   padding-left: 32px;
   padding-top: 5px;
   padding-bottom: 5px;
   padding-right: 32px;
}
input[type=text]:focus {
   width: 100%;
}
button, input, select, textarea {
   font-family: inherit;
   font-size: inherit;
   font-stretch: inherit;
   font-style: inherit;
   font-variant: inherit;
   font-weight: inherit;
   line-height: inherit;
   margin: 0;
}


Not: Ekteki "searchicon.png" adlı resim dosyasını oluşturduğunuz images klasörüne atınız.
Bu arama kutusunu eskiden üzerinde çalıştığım wordpress dizi teması projemin içinden çektim.
Dosya ekleri
searchicon.png
searchicon.png (858 Byte) 1079 kere görüntülendi
1 x

Kimler çevrimiçi

Bu forumu görüntüleyen kullanıcılar: Hiç bir kayıtlı kullanıcı yok ve 1 misafir