CSS ile Arama Kutusu Nasıl Yapılır?

YouTube'ta Takip Et →

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.

HTML Bölümü

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

<form class="form-wrapper cf">
    <input type="text" placeholder="Aranacak Metin..." required>
    <button type="submit">ARA</button>
</form>

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ı

Aşağıdaki kodları da sayfanızın CSS kodlarını düzenlediğiniz alana ekleyin.

.cf:before, .cf:after {content:"";display:table;}.cf:after{clear:both;}.cf{zoom:1;}
.form-wrapper {background: #444;background: rgba(0,0,0,.2);border-radius: 10px;margin: 150px auto 50px auto;padding: 15px;width: 450px;}
.form-wrapper input {background: #eee;border-radius: 3px 0 0 3px;border: 0;float: left;font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';height: 20px;padding: 10px 5px;width: 330px;}
.form-wrapper input:focus {background: #fff;box-shadow: 0 0 2px rgba(0,0,0,.8) inset;outline: 0;}
.form-wrapper input::-webkit-input-placeholder {color: #999;font-style: italic;font-weight: normal;}
.form-wrapper input:-moz-placeholder {color: #999;font-style: italic;font-weight: normal;}
.form-wrapper input:-ms-input-placeholder {color: #999;font-style: italic;font-weight: normal;}
.form-wrapper button {background: #d83c3c;border-radius: 0 3px 3px 0;border: 0;color: #fff;cursor: pointer;float: right;font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';height: 40px;overflow: visible;padding: 0;position: relative;text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);text-transform: uppercase;width: 110px;}
.form-wrapper button:hover{background: #e54040;}
.form-wrapper button:active,.form-wrapper button:focus{background: #c42f2f;outline: 0;}
.form-wrapper button:before {content: '';border-color: transparent #d83c3c transparent;border-style: solid solid solid none;    border-width: 8px 8px 8px 0;left: -6px;position: absolute;top: 12px;}
.form-wrapper button:hover:before{border-right-color: #e54040;}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{border-right-color: #c42f2f;}
.form-wrapper button::-moz-focus-inner {border: 0;padding: 0;}

Bu şablonu kullanarak siz de kendi sayfanızın tasarımına uygun arama kutuları oluşturabilirsiniz.