Arama kutuları web tasarımlarında çok dikkat çekerler ve web tasarımcıların çok şık tasarımlar üretebileceği bir bölümdür. Konu web tasarım olunca da kullanıcı dostu ve göz hoş gelen arama kutuları tasarlamak gerekir.

Aşağıdaki gibi bir arama kutusunu hiçbir görsel kullanmadan, tamamen CSS3 altyapısını kullanarak hazırlayalım.

CSS ile Arama Kutusu

HTML Bölümü

Basitçe bir form alanı oluşturalım.

Placeholder; arama kutusundaki metindir, arama kutusuna bir metin girildiği takdirde buradaki metin kaybolacak, yazılan metin silindiğinde de buradaki metin tekrar görünür olackatır.

Required, arama kutusunun boş olamayacağını, metin olması gerektiğini vurgulayan bir uyarı çıkması içindir.

Arama Kutusunun CSS Kodları

Bu içerik speckyboy‘dan esinlenerek hazırlanmıştır.