Raptus Design Theme

Examples
Default styling

Message

Some additional content

Message

hover
Hover state

Message

Some additional content

Message

focus
Focus state

Message

Some additional content

Message

disabled
Disabled state

Message

Some additional content

Message

error
Error state

Message

Some additional content

Message

Markup
<div class="input input--[modifier class]">
    <label for="select-[modifier class]" class="input__label">Native Select</label>
    <div class="select">
        <select type="text" id="select-[modifier class]" class="input__widget select__widget" size="1" [modifier class]>
            <option>Value</option>
            <option>Value 2</option>
            <option>Value 3</option>
        </select>
    </div>
    <p class="input__message">Message</p>
</div>
<div class="input input--[modifier class]">
    <label class="input__label">Custom Select</label>
    <input class="select__toggle" type="checkbox" id="select-custom-[modifier class]" tabindex="-1">
    <div class="select select--custom">
        <label class="input__widget select__widget" for="select-custom-[modifier class]">Bitte wählen</label>
        <div class="select__content">
            <ul class="unstyled-list">
                <li>
                    <a href="javascript://">Value</a>
                </li>
                <li>
                    <a href="javascript://">Value 2</a>
                </li>
                <li>
                    <a href="javascript://">Value 3</a>
                </li>
            </ul>
            <p>
                Some additional content
            </p>
        </div>
    </div>
    <p class="input__message">Message</p>
</div>
Source: assets/styles/02-atoms/06-form-inputs/_select.scss, line 1