ZK Search Text Box

ZK Version : 7.0.3

image

 

<?page title="Search" contentType="text/html;charset=UTF-8"?>
<zk>
<style src="css/search1.css" />
<window title="Search" border="normal">
<box orient="horizontal" sclass="searchform">
<textbox sclass="searchfield" />
<button label="Ok" sclass="myroundbtn" />
</box>
</window>
</zk>


CSS File

.searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff),
to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#ededed'); /* ie8 */
}

.searchform .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
}

.myroundbtn.z-button{
padding: 5px 10px;
background: #2664cf;
font-family: Arial, sans-serif;
color: #ffffff;
text-align: center;
display: block;
cursor: pointer border: 1px solid #4cadfc;
border-radius: 14px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px background: -webkit-gradient(linear, left top, left bottom, from(#0a8ffe),
to(#2b5cc6));
background: -moz-linear-gradient(top, #0a8ffe, #2b5cc6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0a8ffe',
endColorstr='#2b5cc6')
}






image

<?page title="Search" contentType="text/html;charset=UTF-8"?>
<zk>
<style src="css/search2.css" />
<window title="Search" border="normal">
<box orient="horizontal" sclass="searchform">
<textbox sclass="searchfield"
placeholder="Please type some text" />
<button label="Search" sclass="mybtn" />
</box>
</window>
</zk>


CSS File

.searchform {
background: #eaf8fc;
background-image: -moz-linear-gradient(#fff, #d4e8ec);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #d4e8ec),
color-stop(1, #fff));
-moz-border-radius: 35px;
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;
width: 500px;
height: 35px;
padding: 10px;
margin: 100px auto 50px;
overflow: hidden; /* Clear floats */
}

.searchform .searchfield {
padding: 5px 9px;
height: 23px;
width: 380px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
-moz-border-radius: 50px 3px 3px 50px;
border-radius: 50px 3px 3px 50px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0
rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0
rgba(255, 255, 255, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0
rgba(255, 255, 255, 1);
}

.mybtn.z-button {
background-image: none;
background: #6cbb6b;
background-image: -moz-linear-gradient(#95d788, #6cbb6b);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #6cbb6b),
color-stop(1, #95d788));
-moz-border-radius: 3px 50px 50px 3px;
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0
rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0
rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3)
inset;
height: 26px;
margin: 0 0 0 10px;
padding: 0;
width: 90px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
float: left;
padding-top: 1px;
}

.mybtn.z-button:hover {
background: #95d788;
background-image: -moz-linear-gradient(#6cbb6b, #95d788);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #95d788),
color-stop(1, #6cbb6b));
}