Özelleştirilmiş arama formu oluşturma

Merhaba arkadaşlar.

Bu içeriğimiz de sizlere css ile özelleştirilmiş arama formunun kodlarını paylaşacağım. Umarım faydalı olur.

Lafı fazla uzatmadan hemen bir adet style.css dosyası oluşturup içerisine aşağıdaki kodları yazalım.

@charset "utf-8";
/* CSS Document */

#aramaFormu{
 width:437px;
 height:35px;
 overflow:hidden;
 background-image:url(http://ugurdalkiran.com/wp-content/dosya/arama-formu-ozel.png);
}
#aramaFormu input{
 width:305px;
 height:19px;
 margin-left:40px;
 margin-top:7px;
 float:left;
 border:none;
 background-color:transparent;
 font-size:14px;
 font-family:Calibri, Tahoma, Arial, Sans-Serif;
 outline:none;
 color:#000;
}
#aramaFormu button{
 width:82px;
 height:35px;
 float:right;
 text-indent:-9999px;
 border:none;
 background-color:transparent;
 cursor:pointer;
}

Şimdi ise index.html adında dosyamızı oluşturup içerisine aşağıdaki kodu ekleyelim.

ve şimdi sayfamızı çalıştırıp sonucu görelim.
 bir sonraki yazıda görüşmek üzere