PatternLab (1.0.31)

Appearance

Search ​

This is a collection of search fields with different features. See Forms for JavaScript Settings and API.

.c-float-container.-input.-has-btn > input.js-search

Show Code
html
<div class="c-float-container -has-input -has-btn">
    <label class="c-label" for="search-input">Nach Produkt suchen ...</label>
    <input type="text" class="c-input -icon js-search" data-placeholder="Nach Produkt suchen ..." id="search-input" name="search" value="" />
    <button type="submit" class="c-btn -square-btn -primary -input" title="Suchen">
        <i class="fa fa-search" aria-hidden="true"></i>
        <span class="h-sr-only">Suchen</span>
    </button>
</div>

Activate Search-Button on Typing ​

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]

Show Code
html
<div class="c-float-container -has-input -has-btn" data-activate-btn data-min-amount="5">
    <label class="c-label" for="input-button-disabled">Nach Produkt suchen ...</label>
    <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-button-disabled" name="" value="" />
    <button type="submit" disabled class="c-btn -square-btn -primary -input js-tooltip" title="Suchen">
        <i class="fa fa-search" aria-hidden="true"></i>
        <span class="h-sr-only">Suchen</span>
    </button>
</div>

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

Show Code
html
<div class="c-float-container -has-input -has-btn -has-icon">
    <button type="button" class="c-float-container__icon -clear js-search-clear" aria-controls="search-input">
        <i class="far fa-times" aria-hidden="true"></i>
    </button>
    <label class="c-label" for="search-input">Nach Produkt suchen ...</label>
    <input type="text" class="c-input -icon js-search" data-placeholder="Nach Produkt suchen ..." id="search-input" name="search" value="" />
    <button type="submit" class="c-btn -square-btn -primary -input">
        <i class="fa fa-search" aria-hidden="true"></i>
        <span class="h-sr-only">Suchen</span>
    </button>
</div>

Sticky Search Toolbar ​

See Sticky / Sticky Search Toolbar

2026 - Pharma4u