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

ahmadfononi · 2012 , December 4

ابتدا کدهای Css زیر را در فایل css خود قرار دهید :

کد:

.form-wrapper {
width: 450px;
padding: 8px;
margin: 100px auto;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=bababa]#bababa[/URL]
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=444]#444[/URL]
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=444]#444[/URL]
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=444]#444[/URL]
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=f6f6f6]#f6f6f6[/URL]
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to([URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=eae8e8%29%29]#eae8e8))[/URL]
background-image: -webkit-linear-gradient(top, #f6f6f6, [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=eae8e8%29]#eae8e8)[/URL]
background-image: -moz-linear-gradient(top, #f6f6f6, [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=eae8e8%29]#eae8e8)[/URL]
background-image: -ms-linear-gradient(top, #f6f6f6, [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=eae8e8%29]#eae8e8)[/URL]
background-image: -o-linear-gradient(top, #f6f6f6, [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=eae8e8%29]#eae8e8)[/URL]
background-image: linear-gradient(top, #f6f6f6, [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=eae8e8%29]#eae8e8)[/URL]
}
.form-wrapper #search {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
direction:rtl;
font-family : Tahoma, Arial, Helvetica, Georgia, Sans-serif;
border: 1px solid [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=ccc]#ccc[/URL]
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=fff]#fff[/URL]
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=fff]#fff[/URL]
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=fff]#fff[/URL]
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.form-wrapper #search:focus {
outline: 0;
border-color: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=aaa]#aaa[/URL]
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}
.form-wrapper #search::-webkit-input-placeholder {
color: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=999]#999[/URL]
font-weight: normal;

}
.form-wrapper #search:-moz-placeholder {
color: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=999]#999[/URL]
font-weight: normal;
text-align:right;
}
.form-wrapper #search:-ms-input-placeholder {
color: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=999]#999[/URL]
font-weight: normal;
}
.form-wrapper #submit {
float: right;
border: 1px solid [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=00748f]#00748f[/URL]
height: 42px;
width: 100px;
padding: 0;
cursor: pointer;
font-family : Tahoma, Arial, Helvetica, Georgia, Sans-serif;
color: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=fafafa]#fafafa[/URL]
text-transform: uppercase;
background-color: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=D70411]#D70411[/URL]
background-image: -webkit-gradient(linear, left top, left bottom, from(#A5030D), to([URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=D70411%29%29]#D70411))[/URL]
background-image: -webkit-linear-gradient(top, #D70411, [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=A5030D%29]#A5030D)[/URL]
background-image: -moz-linear-gradient(top,  #D70411, [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=A5030D%29]#A5030D)[/URL]
background-image: -ms-linear-gradient(top,  #D70411, [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=A5030D%29]#A5030D)[/URL]
background-image: -o-linear-gradient(top,  #D70411, [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=A5030D%29]#A5030D)[/URL]
background-image: linear-gradient(top, #D70411, [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=A5030D%29]#A5030D)[/URL]
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=fff]#fff[/URL]
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=fff]#fff[/URL]
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=fff]#fff[/URL]
}
.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
background-color: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=A5030D]#A5030D[/URL]
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to([URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=31b2c3%29%29]#31b2c3))[/URL]
background-image: -webkit-linear-gradient(top, #A5030D, [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=D70411%29]#D70411)[/URL]
background-image: -moz-linear-gradient(top, #A5030D, [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=D70411%29]#D70411)[/URL]
background-image: -ms-linear-gradient(top, #A5030D, [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=D70411%29]#D70411)[/URL]
background-image: -o-linear-gradient(top,#A5030D, [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=D70411%29]#D70411)[/URL]
background-image: linear-gradient(top, #A5030D, [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=D70411%29]#D70411)[/URL]
}
.form-wrapper #submit:active {
outline: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
.form-wrapper #submit::-moz-focus-inner {
border: 0;
}

حال از کد زیر برای ایجاد یک فرم جستجو استفاده نمایید :

HTML:

<form> <input type="text" id="search" placeholder="کلید واژه" required> <input type="submit" value="جستجو" id="submit"> </form>

مشاهده نمونه

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

ahmadfononi

معاونت انجمن