আপনার ওয়েব সাইটে জন্য সার্চ একটি অতি প্রয়োজনীয় বিষয়।  এর একে দেখতে সুন্দর করতে চাইলে এ এ টীউনটি দেখতে পারেন। নিচের ছবিটার মত করে সার্চ বক্স css  ব্যেবহার করে খুব সহজেই করা যায় । আমি নিচে এর এর কোড শেয়ার করলাম ।

লাইভ ডেমো দেখতে এখানে ক্লিক করুন ।

প্রথমে HTML  এ কোডটি দিন ।

<div id="form">
<form  action="" method="get" name="search-form">
<input id="search-box" name="search-box" type="text">
<input id="search-submit" name="search-submit" type="submit" value="">
</form>
</div>

এর পর আপনার CSS  এ

#form {
position: absolute;
top: 100px;
left: 10px;
}
#search-box {
font-family: "Comic Sans MS", cursive;
font-size: 16px;
font-weight: lighter;
color: #666;
padding-left: 5px;
border: 1px thin #ccc;
width: 300px;
height: 23px;
}
#search-box:hover {
border: 1px solid #ccc;
box-shadow: 0px 0px 2px #CCC;
}
#search-submit {
position: absolute;
top: 0px;
right: 0px;
height: 27px;
width: 40px;
border: none;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9),to(#FFF));
background-image: -moz-linear-gradient(-90deg,#f9f9f9,#FFF);
background-image: url(../_piucture/search.gif);
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
border: 1px solid #ccc;
}
#search-submit:hover {
border: 1px solid #ccc;
box-shadow: 0px 0px 2px #CCC;
}

এখানে form কে absolute করা হয়েছে তাই আপনাকে এ কন্টেইনার div কে position: relative; করে দিন। তার পর top ও left মান দিয়ে এটিকে যেখানে দেখেতে চান সেখানে নিয়ে যান।

এখানে তেমন কিছুই করা হয় নাই। শুধু সাবমিট বাঁটনটাকে position করে text fild  এর ভিতরে ডান পাশে নিয়ে নেওয়া হয়েছে।

css দিয়ে একে অন্য ভাবেও করা যায় , আমি আর একদিন অন্য কোড গুলা দিব।

এর আগের পোষ্টে এনেক বেশি কথা লিখেছিলাম , এখানে অনেক কম লিখলাম। আপনাদের সমস্যা হলে জানাবেন।  আর না হলে আপনার যে ধরনের সার্চ বক্স দরকার এর ছবি আমাকে দিয়ে আমি css করে দিব।