Skip to content

Instantly share code, notes, and snippets.

@jdstein1

jdstein1/ResponsiveSearchBarNormal.md

Last active January 2, 2016 12:09
Show Gist options
  • Save jdstein1/8301559 to your computer and use it in GitHub Desktop.
Save jdstein1/8301559 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Search Bar (Normal Style)
Raw
index.html
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Search Bar (Normal)</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 10px; border:1px #eee inset; box-shadow:2px 2px 5px 1px rgba(0,0,0,0.5) inset;}
input[type=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%;}
.inputSearch, .inputGo {min-height:50px;}
#searchDivNoFloat > div .inputSearch {width:80%;position:absolute;top:0;left:0;}
#searchDivNoFloat > div .inputGo {width:20%;position:absolute;top:0;right:0;}
.inputSearch,.inputGo {padding:0 10px;}
.inputSearch {overflow:hidden;min-width:200px;}
.inputGo {overflow:hidden;float:right;width:100px;}
#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";}
.inputSearch {padding-right:2px;}
.inputGo {padding-left:2px;}
}
/* 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;}
.inputSearch {min-width:200px;/**/}
.inputGo {min-width:200px;/**/}
div.inputGo, div.inputSearch {width:100%;/*min-width:150px;*/float:right;}
td.inputGo, td.inputSearch {width:100%;/*min-width:150px;*/}
#searchDivFloat .inputGo {/*opacity:0.1;*/}
#searchDivNoFloat > div {min-height:100px;}
#searchDivNoFloat > div .inputSearch {width:100%;top:0;}
#searchDivNoFloat > div .inputGo {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 .inputSearch, #searchDivNoFloat > div .inputSearch, #searchTable > table .inputSearch {background:rgba(0,0,255,0.125);}
.red, #searchDivFloat > div .inputGo, #searchDivNoFloat > div .inputGo, #searchTable > table .inputGo {background:rgba(0,255,0,0.125);}
</style>
</head>
<body>
<h1>Responsive Search Bar</h1>
<h2>Normal Style</h2>
<h3>by Jeff Stein</h3>
<hr />
<div id="searchDivFloat">
<p>DIV (auto width)</p>
<div class="searchbar">
<div class="inputGo"><input type="button" value="GO!" /></div>
<div class="inputSearch"><input type="search" placeholder="Search" /></div>
</div>
</div>
<hr />
<div id="searchTable">
<p>TABLE (auto width)</p>
<table class="searchbar">
<tbody>
<tr>
<td class="inputSearch"><input type="search" placeholder="Search" /></td>
<td class="inputGo"><input type="button" value="GO!" /></td>
</tr>
</tbody>
</table>
</div>
<hr />
<div id="searchDivNoFloat">
<p>DIV (% width)</p>
<div class="searchbar">
<div class="inputSearch"><input type="search" placeholder="Search" /></div>
<div class="inputGo"><input type="button" value="GO!" /></div>
</div>
</div>
<hr />
</body>
</html>
Raw
ResponsiveSearchBarNormal.md

Responsive Search Bar

Normal Style

by Jeff Stein

About

This is a test of an HTML search bar using various layout techniques. The basic layout is an HTML form with input search box and "Go!" button. The variations use 1) auto width DIVs, 2) TABLEs, and 3) percentage width DIVs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment