مطالب عمومی

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

مشاوره رایگان

برای مشاوره در زمینه
سایت و سئو
با ما تماس بگیرید.

شبکه های اجتماعی ما
دوره سئو مقدماتی

یک دوره مقدماتی و رایگان سئو که بسیار پربار و سرشار از تجربه مدرس و با کیفیت بالا تهیه شده تا بتوانید در زمان کمتری وب سایت را سئو کنید.

4117 نفر
2 دقیقه
بروزرسانی در: آبان 9, 1400

فهرست مطالب

برای اینکه وب سایت شما از یکنواختی خارج شود، نیاز دارید تا با استایل دهی و افکت های زیبا، ظاهر سایتتان را عوض کنید. به همین دلیل ما در این آموزش 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]

 

4/5 - (3 امتیاز)
بدون دیدگاه
انتشار: بهمن 12, 1394
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
آیا نیازمند راهنمایی هستید؟
همین حالا برای مشاوره رایگان اقدام کنید
با پر کردن فرم، یک قدم به رشد آنلاین نزدیک‌تر شوید!
فرم درخواست مشاوره

برای راحتی شما عزیزان می‌توانید اطلاعات خود را در کادر زیر وارد کنید تا کارشناسان ما با شما تماس بگیرند

مشاوره رایگان
پیمایش به بالا