ZK Search Text Box

ZK Version : 7.0.3

 

<?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')
}

---

<?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));
}