Skip to content

Instantly share code, notes, and snippets.

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="" 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>
<!--end layout-widget-wrapper -->
.custom-search {
position: absolute;
right: 20px;
top: 1px;
#express-form-typeahead {
background-color: transparent;
background-image: url(*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