# Input "Old-Style"

# Default Plausi-Input

.c-input.-old

hide code

<input type="text" class="c-input -old" name="" value="" />

# Different Input Sizes

# Small Inputs (e.g. for Units)

.c-input.-old.-small
.c-input.-old.-einheit

hide code

<input type="text" class="c-input -old -small" name="" value="" placeholder="12 g" />
<input type="text" class="c-input -old -einheit" name="" value="" placeholder="12 g" />

# Medium Inputs

.c-input.-old.-medium

hide code

<input type="text" class="c-input -old -medium" name="" value="" placeholder="0,2342345 mg" />

# Large Inputs

.c-input.-old.-large

hide code

<input type="text" class="c-input -old -large" name="" value="" placeholder="Large Input Placeholder" />

# Input Type Number

.c-input.-old.-small

hide code

<input type="number" class="c-input -old -small" name="" value="" placeholder="-small" />

Hide Arrows in Number-Textfield: .c-input.-hide-arrows

hide code

<input type="number" class="c-input -old -hide-arrows -small" name="" value="" placeholder="-small" />

# Modifiers

.c-input.-old.-white .c-input.-old.-success .c-input.-old.-highlight/.-warning .c-input.-old.-error

hide code

<div class="h-highlight-block -small m-b-m">
    <input type="text" class="c-input -old -white" name="" value="" placeholder="-white" />
</div>
<input type="text" class="c-input -old -success m-b-m" name="" value="" placeholder="-success" />
<input type="text" class="c-input -old -warning m-b-m" name="" value="" placeholder="-warning or -highlight" />
<input type="text" class="c-input -old -error m-b-m" name="" value="" placeholder="-error" />

# Pseudo Input-Fields

WARNING

Refactoring: Old Plausi Class Names -> ABEM Style

.pseudo-field

I'm not a real input field

hide code

<div class="pseudo-field">I'm not a real input field</div>

# Input Wraps with inline Prefixes, Unit-(Dropdowns) or Icons

WARNING

Use these classes from now on: .c-input-wrap

div.c-input-wrap (old: .menge-wrap / .inline-menge-wrap)
> span.c-input-wrap__prefix (old: .prefix)
> span.c-input-wrap__unit (old: .einheit)
> div.c-input-wrap__input (old: .float-width-wrap)
> c-select.-old / .c-input.-old

1
2
3
4
5
6

I.E.

hide code

<div class="grid">
    <div class="col-6">
        <div class="c-input-wrap">
            <span class="prefix js-tooltip" title="I'm a tooltip">ad </span>
            <span class="c-input-wrap__unit">I.E.</span>
            <div class="c-input-wrap__input">
                <input type="text" class="c-input -old" value="200" />
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="c-input-wrap">
            <select class="c-select -old js-select2" name="opts" data-additional-classes="-old">
                <option value='1'>mg</option>
                <option value='2'>g</option>
                <option value='3'>I.E.</option>
            </select>
            <div class="c-input-wrap__input">
                <input class="c-input -old" placeholder="40,05" />
            </div>
        </div>
    </div>
</div>

# Input Wrap with Select2 / Search

.c-input-wrap.-is-search

hide code

<div class="c-input-wrap -is-search">
<select class="c-select -old js-select2" data-additional-classes="-old" data-search>
<option selected>Lorem Ipsum</option>        
</select>
</div>

# Byhand Icon

ad g

hide code

<div class="c-input-wrap">
    <span class="byhand-icon js-tooltip hp-show" data-hasqtip="56" title="Handeinwaage"></span>
    <span class="c-input-wrap__prefix" style="">ad </span>
    <span class="c-input-wrap__unit">g</span>
    <div class="c-input-wrap__input">
        <input type="text" data-vv-name="istEinwaage" class="c-input -old" />
    </div>
</div>

# Modifiers / Input States

# Disabled Input

.c-input.-old:disabled or .c-input.-old.-disabled

hide code

<input type="text" class="c-input -old" disabled name="" value="" placeholder="Disabled Input" />

.-striped
.-error / .-highlight / .-warning / .-success / .-white

1
2

hide code

<div class="grid">
    <div class="col-6">
        <div class="c-input-wrap -striped">
            <select class="c-select -old js-select2" name="opts" data-additional-classes="-old">
                <option value='1'>mg</option>
                <option value='2'>g</option>
                <option value='3'>I.E.</option>
            </select>    
            <div class="c-input-wrap__input">
                <input class="c-input -old" placeholder="40,05" />
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="c-input-wrap -error">
            <select class="c-select -old js-select2" name="opts" data-additional-classes="-old">
                <option value='1'>mg</option>
                <option value='2'>g</option>
                <option value='3'>I.E.</option>
            </select>    
            <div class="c-input-wrap__input">
                <input class="c-input -old" placeholder="40,05" />
            </div>
        </div>
    </div>
</div>

# Autosize Input / Flexible Textfield

TIP

Based on Autosize JS (opens new window)

See Textareas: Autosize for Usage Example.

← Input Textarea →