HubSpot Expanding Search Form

hubspot-expanding-search-form.markdown

HubSpot Expanding Search Form

Based on Sluggern's Pen Wordpress Expanding Search.

A Pen by Karl Kasischke on CodePen.

License.

index.html

<div class="span3 widget-span widget-type-raw_html custom-search" style="" data-widget-type="raw_html" data-x="4" data-w="3">
  <div class="cell-wrapper layout-widget-wrapper">
    <span id="hs_cos_wrapper_module_14308928327274411" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_raw_html" style="" data-hs-cos-general-type="widget" data-hs-cos-type="raw_html"><form method="GET" action="https://www.shopwithscrip.com/Search?" role="search" class="navbar-form navbar-left ng-pristine ng-valid" id="express-form" novalidate="">
<input required="" name="q" placeholder="Search" class="form-control tt-input" id="express-form-typeahead" autocomplete="off" spellcheck="false" dir="auto" type="text">
<button class="search-btn" type="submit"><span class="icon"></span></button>
    </form>
    </span>
  </div>
  <!--end layout-widget-wrapper -->
</div>

style.css

.custom-search {
	position: absolute;
	right: 20px;
	top: 1px;
}
#express-form-typeahead {
	background-color: transparent;
	background-image: url(https://api.ning.com:80/files/dr2jDpSXWFhyuoGJ4YR5Fu-PwuqLz70YxRaUcpdKNxf2HI5ECzddyx3NHuPz-MB4ujGS4rEtdtS-aQoFlQrtv*XwVOu*AvC8/searchicon.png);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	border: none;
	cursor: pointer;
	height: 37px;
	margin: 3px 0;
	padding: 0 0 0 34px;
	position: relative;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition:         width 400ms ease, background 400ms ease;
	width: 0;  
}
#express-form-typeahead:focus {
	background-color: #fff;
	border: 2px solid black;
	cursor: text;
	outline: 0;
	width: 230px;
}
.search-btn {
  display: none;
}
input[type="search"] {
  -webkit-appearance: textfield;
}