In html heb ik een zoekformulier gemaakt, maar nu moet de functie nog werken binnen de website. Weet iemand een script?
jquery.color.js
script.js
<form id="searchForm">
<fieldset>
<div class="input">
<input type="text" name="s" id="s" placeholder="zoek op deze website" />
</div>
<input type="submit" id="searchSubmit" value="" />
</fieldset>
</form>
#searchcontainer {
width:240px;
height:100%;
margin:0 auto;
position:relative;
}
#searchmain {
width:240px;
position:absolute;
top:50%;
margin:-10px 0 -120px 0;
}
/*-------------
SEARCH
-------------*/
#searchForm fieldset {
width:200px;
position:relative;
display:block;
border: 0px;
}
div.input {
width: 160px;
border-radius:10px;
border:1px solid #c6d2db;
border-top:1px solid #b4c1cb;
box-shadow:inset 0 1px 2px rgba(0,0,0,0.08);
float:right;
background-color: #e8edf1;
padding: 0px;
margin: 0 15px 0 15px;
background:#e8edf1;
border-bottom: 3px solid #767676;
border-left: 3px solid #767676;
box-shadow: 0 2px 4px #666666;
}
div.input.focus {
border:1px solid #9ecbe2;
box-shadow:0 0 6px #abdcff, inset 0 1px 2px rgba(0,0,0,0.08);
}
input#s {
width:220px;
border:0;
border-radius:20px;
background:transparent;
height:100%;
color:#b4bdc4;
text-shadow:0 1px 1px #fff;
}
input#s:focus {
outline:none;
width: 250px;
}
input#searchSubmit {
width:19px;
height:19px;
text-indent:-9999px;
overflow:hidden;
background:url(../images/search-icon.png) no-repeat;
border:0;
position:absolute;
top:7px; right:13px;
z-index:5;
display:none;
cursor:pointer;
}