Floating Placeholder

Floating Placeholder represents a different styling for the input and select form elements.

Floating Placeholder Input


<div class="fltp">
    <input type="text" value="" required>
    <label class="placeholder" data-big-placeholder="Click here" data-little-placeholder="This is an input example"></label>
</div>

Floating Placeholder input has the following attributes:

data-big-placeholder - represents the placeholder when the input is not in focus
data-little-placeholder - represents the placeholder when the input is in focus

Icon style

We can add an animated icon before input like this:


<div class="fltp">
    <i class="icon icon-search"></i>
    <input type="text" value="" required>
    <label class="placeholder" data-big-placeholder="Click here" data-little-placeholder="Floating Placeholder input example"></label>
</div>

Styling

In page,floating placeholder can be styled using these variables from floating-placeholder.variables.

@fltp-height - floating placeholder height
@fltp-maximized-font-size - font size for data-big-placeholder visible
@fltp-maximized-font-weight - font weight for data-big-placeholder visible
@fltp-minimized-font-size - font size for data-little-placeholder visible
@fltp-input-font-size - font size for input
@fltp-input-font-weight - font weight for input
@fltp-label-color - text color for label
@fltp-input-color - text color for input or select

If the floating placeholder resides in header, it will inherit header-section styling - read more here .

Floating Placeholder Calendar

Floating Placeholder Calendar is identical in structure with Floating Placeholder Input. Its functionality is given by calendar module.


<div class="fltp" id="examplecalendar">
    <input type="text" value="" required placeholder="enter date">
    <label class="placeholder"  data-big-placeholder="Click here" data-little-placeholder="Floating Placeholder Calendar Example"></label>
</div>

Floating Placeholder Select

The base of this elements stand a select that is being transformed into dropdown using ".dropdown()" JavaScript function.

First "option" of the select must be empty.

Floating Placeholder Select


<div class="fltp">
    <select name="dropdown" size="13" class="dropdown" required>
        <option value="0" selected>&nbsp;</option>
        <option value="1">1</option>
        ...
        <option value="5">12</option>
    </select>
    <label class="placeholder">Floating Placeholder Select</label>
</div>

Floating Placeholder Flat Style

This is another style for the floating placeholder item.


<div class="fltp flat-sq">
    ...
</div>

Floating Placeholder Select