Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HubSpot Expanding Search Form
<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>
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.