آموزش ساخت باکس جستجو در روولوشن اسلایدر

با یکی دیگر از جلسات پروژه محور آموزش روولوشن اسلایدر در خدمت شما همراهان عزیز آکادمی وبکیما هستیم، در این جلسه می‌خواهیم نحوه طراحی و ساخت یک باکس جستجو در اسلایدر روولوشن را به صورت کامل آموزش دهیم، پس اگر می‌خواهید یاد بگیرید که چگونه یک باکس جستجو داخل یک اسلایدر طراحی کنید به صورتی که بخش جستجو به صورت کامل کار کند، این جلسه را با دقت دنبال کنید.

کدهای HTML برای ساخت باکس جستجو

<form role="search" method="get" id="searchform" class="webkima-searchform" action="https://webkima.com">
<input type="text" value="" name="s" id="s" placeholder="دنبال چی می‌گردی؟" />
<input type="submit" id="searchsubmit" value="جستجو" />
</form>

کدهای CSS برای ساخت باکس جستجو

.webkima-searchform input#s {
    font-family: 'dana';
    font-size: 14px;
    background-color: #ffffff85;
    line-height: 45px !important;
    padding: 0 20px;
    cursor: text;
    border: 0;
    width: 400px;
    margin-bottom: 0px;
    transition: background-color 0.5s;
    border-radius: 0px;
    text-align: right !important;
}
.webkima-searchform input#s::placeholder {
	color: #fff !important;
}
 
.webkima-searchform input#s[type="text"]:focus {
	background-color: #f5f5f5; 
}
.webkima-searchform input#searchsubmit, .webkima-searchform input#searchsubmit:focus {
    font-family: 'dana';
    line-height: 45px !important;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 300 !important;
    padding: 0 20px;
    border: 0;
    background: #0028eea6;
    color: #fff;
    border-radius: 0px;
	margin-right: -11px;
}
.webkima-searchform input#searchsubmit:hover {
    background: #0028ee;
}