Search Bar

dabblet.css

/**
 * 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;
}

dabblet.html

<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>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}