Search
TIP
See Forms for JavaScript Settings and API.
Default Search
.c-float-container.-input.-has-btn > input.js-search
INFO
Activate Search-Button on Typing
TIP
Add the data-min-amount attribute to activate the button when the user inserts a minimum amount of characters. The minimum amount is defined via the extra attribute data-min-amount="5".
.c-float-container.-has-input.-has-btn[data-activate-btn][data-min-amount="5] > .c-input + .c-btn.-icon-btn.-square.-input[disabled]
INFO
Search with Clear-Button
Type text into the field and delete it with the "X"-Button.
.c-float-container.-input.-has-btn.-has-icon > button.js-search-clear
INFO
Taxikon Search
Sticky classes are added to the search toolbar when it reaches the top of the viewport.
Util.addStickyClass(document.querySelector('.js-search-toolbar'), 'h-pos-sticky h-top-0 h-right-0 p-x-m p-y-s h-width-60 h-always-on-top h-border-radius-large h-border-radius-reset-top h-box-shadow', 0);INFO
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sticky Version
(.js-search-toolbar without .h-pos-fixed class for demo purposes)
The class .-enlarge-input-on-active enlarges the input field when it is focused (.c-float-container has .-is-active class)
INFO