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.

<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ı

.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 içerik speckyboy‘dan esinlenerek hazırlanmıştır.