آموزش ساخت فرم جستجو با Css

برای اینکه وب سایت شما از یکنواختی خارج شود، نیاز دارید تا با استایل دهی و افکت های زیبا، ظاهر سایتتان را عوض کنید. به همین دلیل ما در این آموزش css، این بار برای شما یک فرم جستجو را آماده کرده ایم که با هاور شدن دکمه ی submit کاربر میتواند متن مورد نظر برای جستجو را وارد کند.

مشاهده دمو

کدهای HTML

کدهای html برای ساخت فرم جستجو را بصورت زیر مینویسیم :

[free_vip]

[html]

<div id=”wrapper”>
<form action=”#” class=”search-form”>
<div class=”form-group”>
<input type=”text” class=”form-control” name=”search” id=”search” placeholder=”جستجو”>
<span class=”fa fa-search form-control-feedback”></span> </div>
</form>
</div>
<!–#wrapper–>

[/html]

دقت کنید که برای آیکن جستجو از فونت آیکن ها استفاده کرده ایم. برای مشاهده آموزش فونت آیکن ها میتوانید این قسمت را مشاهده کنید.

کدهای CSS

[html]
#wrapper {
margin: 20px auto;
width: 400px;
}
.search-form {
overflow: hidden;
position: relative;
}
.search-form .form-group {
float: left;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
padding-right: 34px;
border: 0 none;
background: transparent;
box-shadow: none;
display: block;
width: 100%;
line-height: 28px;
font-family: tahoma;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}
.search-form .form-group:hover, .search-form .form-group.hover {
width: 99%;
border-radius: 25px 4px 4px 25px;
}
.search-form .form-group span.form-control-feedback {
position: absolute;
top: 0;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
}
[/html]

شما میتوانید فایل کامل این آموزش را از لینک زیر دانلود کنید :

[/free_vip]