jquery - input box design is required -
i need search box next image given in likn
http://4.bp.blogspot.com/-jxn_3cd5gyk/u6vx61x1qbi/aaaaaaaaf2m/vjuhefcu0f4/s1600/needed.jpg
i have designed input field, given in next code. want image in link. want have field above image
html <html> <head> <style> /*...........search products start.............*/ #searchbox { background-color: #eaf8fc; background-color: #fff; border-radius: 5px; border-width: 3px; border-style: solid; border-color: #edf1f2; width: 300px; height: 30px; padding: 1px; overflow: hidden; /* clear floats */ } #search, #submit { float: left; } #search { height: 30px; width: 200px; border:1px solid #fff; font: normal 13px 'trebuchet ms', arial, helvetica; background: #fff; } /* ----------------------- */ #submit { background-color: #b6c2c9; border-radius:2px; height: 26px; margin: 1px 0 0 8px; padding: 0; text-transform: uppercase; width: 90px; cursor: pointer; font: bold 14px arial, helvetica; color: #23441e; } /*............search products end............*/ </style> </head> <body> <form id="searchbox" action=""> <input id="search" type="text" placeholder="type here"> <input id="submit" type="submit" value="products"> </form> </body> </html> please allow me know missing, fiddle link. thankful if help in in this. think need more css, unfortunately not in css
<input id="search"type='search' placeholder="type here"/> <input type="submit" value="products" /> <hr> <input type='search'results id="none"/>
css
input[type=search]{ -webkit-appearance: none!important; color: gray; cursor:text; display: block; outline: 0; border:1px solid #999da0; font: normal 13px 'trebuchet ms', arial, helvetica; background: #fff; box-shadow: 0 0 2px 4px #ced2d5; border-radius: 5px; overflow: hidden; width:300px; padding:6px 20px; background: #fff url('http://cdn.sstatic.net/img/share-sprite-new.png?v=204b1e0e421b') no-repeat -271px -89px !important; } input[type="search"]::-webkit-input-placeholder { color: #ccc; } input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; height: 16px; width: 16px; background: red; cursor:pointer!important; z-index:2; margin:-2px -10px 0 0; content:'▼'; color:gray; } input[type=submit]{ position:absolute; border-radius:4px; margin: -30px 0 0 188px; padding: 4px 25px 2px 4px; text-transform: uppercase; cursor: pointer; font: bold 14px arial, helvetica; color: white; border:none; outline:none; } #none{ background: none!important; padding:none!important; box-shadow:none!important; } jquery html css css3
No comments:
Post a Comment