Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Search Bar
/**
* Search Bar
*/
body {
margin: 0;
}
.topbar {
height: 42px;
width: 100%;
background-color: #333;
}
.TopBarSearch {
display: flex;
background-color: #111;
width: 300px;
float: right;
}
.TopBarSearch-input {
border: 0;
outline: 0;
padding: 0 10px;
flex-grow: 1;
background-color: rgba(0,0,0,0);
font-size: 15px;
color: #fff;
box-sizing: border-box;
height: 42px;
}
<div class="topbar">
<div class="TopBarSearch">
<svg version="1.1" id="search_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="42px" height="42px" viewBox="0 0 42 42" enable-background="new 0 0 42 42" xml:space="preserve" class="focus"> <g id="BACK" display="none"> <rect x="-871" y="-179" display="inline" fill="#BABABA" width="2097" height="674"></rect> </g> <g id="Elements"> <g id="Main_menu_Button"> </g> <path fill="#FFFFFF" d="M33.389,31.531l-6.172-6.172c1.319-1.5,2.125-3.46,2.125-5.609c0-4.693-3.819-8.512-8.514-8.512 c-4.693,0-8.512,3.818-8.512,8.512c0,4.694,3.818,8.514,8.512,8.514c1.825,0,3.514-0.582,4.901-1.563l6.246,6.245L33.389,31.531z M14.316,19.75c0-3.59,2.921-6.512,6.512-6.512c3.592,0,6.514,2.921,6.514,6.512c0,3.592-2.922,6.514-6.514,6.514 C17.238,26.264,14.316,23.342,14.316,19.75z"></path> </g> </svg>
<input class="TopBarSearch-input" type="search" placeholder="SEARCH THE MAP">
<svg version="1.1" id="collapse-search-svg" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="42px" height="42px" viewBox="0 0 50 50" xml:space="preserve" class="mobile-show"> <g id="Back" display="none"> <rect x="-309" y="-14" display="inline" fill="#BABABA" width="970" height="78"></rect> </g> <g id="Elements"> <polyline fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="21,33 29,25 21,17"></polyline> </g> </svg>
</div>
</div>
// alert('Hello world!');
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment