1: <?page title="Search" contentType="text/html;charset=UTF-8"?>
2: <zk>3: <style src="/Search1.css" />
4: <window title="Search" border="normal">
5: <box orient="horizontal" sclass="searchform">
6: <textbox sclass="searchfield" /> <button label="Ok" mold="trendy" />
7: </box> 8: </window> 9: </zk> 1: .searchform { 2: display: inline-block; 3: zoom: 1; /* ie7 hack for display:inline-block */ 4: *display: inline; 5: border: solid 1px #d2d2d2; 6: padding: 3px 5px; 7: -webkit-border-radius: 2em; 8: -moz-border-radius: 2em; 9: border-radius: 2em; 10: -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, .1); 11: -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, .1); 12: box-shadow: 0 1px 0px rgba(0, 0, 0, .1); 13: background: #f1f1f1; 14: background: -webkit-gradient(linear, left top, left bottom, from(#fff), 15: to(#ededed) ); 16: background: -moz-linear-gradient(top, #fff, #ededed); 17: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', 18: endColorstr='#ededed' ); /* ie7 */ 19: -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', 20: endColorstr='#ededed' ); /* ie8 */ 21: } 22: 23: .searchform .searchfield { 24: background: #fff; 25: padding: 6px 6px 6px 8px; 26: width: 202px; 27: border: solid 1px #bcbbbb; 28: outline: none; 29: -webkit-border-radius: 2em; 30: -moz-border-radius: 2em; 31: border-radius: 2em; 32: -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); 33: -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); 34: box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); 35: } 36: 37: .z-button .z-button-tl,.z-button .z-button-tr { 38: background-image: none; 39: -moz-border-radius: 20px; 40: -webkit-border-radius: 20px; 41: -khtml-border-radius: 20px; 42: border-radius: 20px 43: } 44: 45: .z-button .z-button-tm,.z-button .z-button-cl,.z-button .z-button-cr,.z-button .z-button-bm,.z-button .z-button-bl,.z-button .z-button-br 46: { 47: background-image: none; 48: } 49: 50: .z-button .z-button-cm { 51: background-image: none; 52: background-color: gold; 53: border-radius: 20px background-image: none; 54: border-radius: 20px 20px 20px 20px; 55: height: 27px; 56: top: 20px; 57: width: 27px; 58: } 59: 60: .z-button .z-button-tl,.z-button .z-button-tr { 61: height: 0; 62: }1: <?page title="Search" contentType="text/html;charset=UTF-8"?>
2: <zk>
3: <style src="/Search2.css" />
4: <window title="Search" border="normal">
5: <box orient="horizontal" sclass="searchform">
6: <textbox sclass="searchfield" placeholder="Please type some text" /> <button label="Search" mold="trendy" />
7: </box>
8: </window>
9: </zk>
1: .searchform { 2: background: #eaf8fc; 3: background-image: -moz-linear-gradient(#fff, #d4e8ec); 4: background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #d4e8ec), 5: color-stop(1, #fff) ); 6: -moz-border-radius: 35px; 7: border-radius: 35px; 8: border-width: 1px; 9: border-style: solid; 10: border-color: #c4d9df #a4c3ca #83afb7; 11: width: 500px; 12: height: 35px; 13: padding: 10px; 14: margin: 100px auto 50px; 15: overflow: hidden; /* Clear floats */ 16: } 17: 18: .searchform .searchfield { 19: padding: 5px 9px; 20: height: 23px; 21: width: 380px; 22: border: 1px solid #a4c3ca; 23: font: normal 13px 'trebuchet MS', arial, helvetica; 24: background: #f1f1f1; 25: -moz-border-radius: 50px 3px 3px 50px; 26: border-radius: 50px 3px 3px 50px; 27: -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 28: rgba(255, 255, 255, 1); 29: -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 30: rgba(255, 255, 255, 1); 31: box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 32: rgba(255, 255, 255, 1); 33: } 34: 35: .z-button .z-button-tm, 36: .z-button .z-button-cl, 37: .z-button .z-button-cr, 38: .z-button .z-button-bm, 39: .z-button .z-button-bl, 40: .z-button .z-button-br, 41: .z-button .z-button-tl, 42: .z-button .z-button-tr 43: { 44: background-image: none; 45: } 46: 47: 48: 49: .z-button .z-button-cm { 50: background-image: none; 51: background: #6cbb6b; 52: background-image: -moz-linear-gradient(#95d788, #6cbb6b); 53: background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #6cbb6b), 54: color-stop(1, #95d788) ); 55: -moz-border-radius: 3px 50px 50px 3px; 56: border-radius: 3px 50px 50px 3px; 57: border-width: 1px; 58: border-style: solid; 59: border-color: #7eba7c #578e57 #447d43; 60: -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 61: rgba(255, 255, 255, 0.3) inset; 62: -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 63: rgba(255, 255, 255, 0.3) inset; 64: box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) 65: inset; 66: height: 26px; 67: margin: -5px 0 0 10px; 68: padding: 0; 69: width: 90px; 70: cursor: pointer; 71: font: bold 14px Arial, Helvetica; 72: color: #23441e; 73: text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 74: float: left; 75: padding-top:7px; 76: } 77: 78: .z-button-over .z-button-cm { 79: background: #95d788; 80: background-image: -moz-linear-gradient(#6cbb6b, #95d788); 81: background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #95d788), 82: color-stop(1, #6cbb6b) ); 83: }
No comments:
Post a Comment