| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Responsive Search Bar - Flat Style</title> | |
| <style> | |
| * {box-sizing:border-box;} | |
| br {clear:both;height:0} | |
| input {height:30px;line-height:30px;width:100%;border-radius:4px;padding:0;margin:10px 0;} | |
| input[type=text], | |
| input[type=search]{padding:0 5px;border:1px #eee inset; box-shadow:2px 2px 5px 1px rgba(0,0,0,0.5) inset;} | |
| input[type=button], | |
| button{padding:0 10px;border:1px #eee outset; box-shadow:2px 2px 5px 1px rgba(0,0,0,0.5);} | |
| table, tr, td {padding:0;margin:0;border:0;border-spacing:0;} | |
| #searchDivFloat, #searchDivNoFloat, #searchTable {width:100%;min-width:200px;position:relative;} | |
| #searchDivFloat > div, #searchDivNoFloat > div, #searchTable > table {width:100%;min-height:50px;overflow:hidden;position:relative;} | |
| .searchbar, #searchTable > table tbody, #searchTable > table tr {width:100%;} | |
| .boxSearch, .boxBack {min-height:50px;} | |
| #searchDivNoFloat > div .boxSearch {width:80%;position:absolute;top:0;right:0;} | |
| #searchDivNoFloat > div .boxBack {width:20%;position:absolute;top:0;left:0;} | |
| .boxSearch,.boxBack {padding:0 10px;position: relative;} | |
| .boxSearch {overflow:hidden;min-width:200px;} | |
| .boxBack {overflow:hidden;float:left;width:100px;} | |
| .inputSearch,.inputClear {width:auto;} | |
| .inputSearch {min-width:100%;} | |
| .inputClear {position: absolute; top: 0; right:10px; opacity: 0.1;} | |
| #searchDivFloat p:after, #searchDivNoFloat p:after, #searchTable p:after {content:""; display:block; font-size:10px; color:#f00; font-family:"geneva","courier";} | |
| /* Media Query for medium screens */ | |
| @media all and (min-width:320px) { | |
| #searchDivFloat p:after, #searchDivNoFloat p:after, #searchTable p:after {content:"screen >= 320px";} | |
| .boxSearch {} | |
| .boxBack {} | |
| } | |
| /* Media Query for small screens */ | |
| @media all and (max-width:319px) { | |
| #searchDivFloat p:after, #searchDivNoFloat p:after, #searchTable p:after {content:"screen < 320px";} | |
| /*table,tbody,tr,td {display:block !important;}*/ | |
| .boxSearch {min-width:200px;/**/} | |
| .boxBack {min-width:200px;/**/} | |
| div.boxBack, div.boxSearch {width:100%;/*min-width:150px;*/float:right;} | |
| td.boxBack, td.boxSearch {width:100%;/*min-width:150px;*/} | |
| #searchDivFloat .boxBack {/*opacity:0.1;*/} | |
| #searchDivNoFloat > div {min-height:100px;} | |
| #searchDivNoFloat > div .boxSearch {width:100%;top:0;} | |
| #searchDivNoFloat > div .boxBack {width:100%;top:50px;} | |
| } | |
| /* Test Colors */ | |
| .pink, #searchDivFloat, #searchDivNoFloat, #searchTable {background:rgba(255,127,191,0.25);} | |
| .grey, #searchDivFloat > div, #searchDivNoFloat > div, #searchTable > table {background:rgba(255,255,255,0.5);} | |
| /*.green, #searchTable > table tbody {background:rgba(0,127,0,0.25);}*/ | |
| .blue, #searchDivFloat > div .boxSearch, #searchDivNoFloat > div .boxSearch, #searchTable > table .boxSearch {background:rgba(0,0,255,0.125);} | |
| .red, #searchDivFloat > div .boxBack, #searchDivNoFloat > div .boxBack, #searchTable > table .boxBack {background:rgba(0,255,0,0.125);} | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Responsive Search Bar</h1> | |
| <h2>Flat Style</h2> | |
| <h3>by Jeff Stein</h3> | |
| <hr /> | |
| <div id="searchDivFloat"> | |
| <p>DIV (float, auto width)</p> | |
| <div class="searchbar"> | |
| <div class="boxBack"><input type="button"class="inputBack" value="Back" /></div> | |
| <div class="boxSearch"><input type="search" class="inputSearch" placeholder="Search" /><input type="button" class="inputClear" value="X" /></div> | |
| </div> | |
| </div> | |
| <hr /> | |
| <div id="searchTable"> | |
| <p>TABLE (auto width)</p> | |
| <table class="searchbar"> | |
| <tbody> | |
| <tr> | |
| <td class="boxBack"><input type="button"class="inputBack" value="Back" /></td> | |
| <td class="boxSearch"><input type="search" class="inputSearch" placeholder="Search" /><input type="button" class="inputClear" value="X" /></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <hr /> | |
| <div id="searchDivNoFloat"> | |
| <p>DIV (abs, % width)</p> | |
| <div class="searchbar"> | |
| <div class="boxBack"><input type="button"class="inputBack" value="Back" /></div> | |
| <div class="boxSearch"><input type="search" class="inputSearch" placeholder="Search" /><input type="button" class="inputClear" value="X" /></div> | |
| </div> | |
| </div> | |
| <hr /> | |
| </body> | |
| </html> |
by Jeff Stein
This is a test of an HTML search bar using various layout techniques. The layout is an HTML form with back button fieldset and search input fieldset. The inner search fieldset has a search box and clear "X" button. The variations use 1) auto width DIVs, 2) TABLEs, and 3) percentage width DIVs.