PatternLab Vite (1.8.12)

Appearance

Select ​

INFO

This component is about default HTML select dropdowns without using Select2 for enhanced functionality and styled dropdowns.

select.c-select

Content:

Default Version ​

TIP

.c-float-container.-has-select > .c-select

  • Always use the for attribute to link the label to the select with the same id.
  • Use Form.init() to activate the floating labels. See Forms Module.
Show Code
html
   <div class="c-float-container -has-select">
        <label class="c-label" for="REPLACE_ID01">Select Box</label>
        <select class="c-select" id="REPLACE_ID01">
            <option value='0'></option>
            <option value='1'>First item</option>
            <option value='2'>Second item</option>
            <option value='3'>Third item</option>
            <option value='4'>Lorem Ipsum</option>
            <option value='5'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
            <option value='6'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
            <option value='7'>adipisici elit</option>
            <option value='8'>Last item</option>
        </select>
    </div>

Variants ​

Light Version ​

.c-float-container.-has-select.-light > select.c-select

Show Code
html
<div class="c-float-container -has-select -light">
    <label class="c-label" for="REPLACE_ID02">Light Select Dropdown</label>
    <select class="c-select" id="REPLACE_ID02">
        <option value="0"></option>
        <option value='1'>First item</option>
        <option value='2'>Second item</option>
        <option value='3'>Third item</option>
    </select>
</div>

Active Floating Label ​

TIP

  • If you want activated/floating labels by default, add the class -is-active to the .c-float-container.

.c-float-container.-has-select.-is-active

Show Code
html
<div class="c-float-container -has-select -is-active">
    <label class="c-label" for="REPLACE_ID03">Select with activated label</label>
    <select class="c-select" id="REPLACE_ID03">
        <option value="0"></option>
        <option value='1' selected>First item</option>
        <option value='2'>Second item</option>
        <option value='3'>Third item</option>
    </select>
</div>

Disabled Select ​

.c-select.-is-disabled > select[disabled]

Show Code
html
<div class="c-float-container -has-select -is-disabled">
    <label class="c-label" for="REPLACE_ID04">Disabled Select Box</label>
    <select class="c-select" disabled id="REPLACE_ID04">
        <option value='1'>First item</option>
        <option value='2'>Second item</option>
        <option value='3'>Third item</option>
        <option value='4'>Lorem Ipsum</option>
        <option value='5'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
        <option value='6'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
        <option value='7'>Just an item</option>
        <option value='8'>Last item</option>
    </select>
</div>

Disabled Results ​

<option value='...' disabled>

Show Code
html
<div class="c-float-container -has-select">
    <label class="c-label" for="disabled-options">Select Box with Disabled Options</label>
    <select class="c-select" id="disabled-options">
        <option value='1'>First item</option>
        <option value='2' disabled>Second item</option>
        <option value='3'>Third item</option>
        <option value='4' disabled>Last item</option>
    </select>
</div>

Combinations ​

Select with Icon ​

.c-float-container.-select.-has-icon > .c-float-container__icon + select.c-select.-icon

Show Code
html
<div class="c-float-container -has-select -has-icon">
    <div class="c-float-container__icon">
        <span class="fa fa-sliders-h" aria-hidden="true"></span>
    </div>
    <label class="c-label" for="select-icon">Floating Label</label>
    <select class="c-select -icon" name="select-icon">
        <option value='1'>First item</option>
        <option value='2'>Second item</option>
        <option value='3'>Third item</option>
        <option value='4'>Last item</option>
    </select>
</div>

Select with Info-Tooltip ​

.c-float-container.-has-select.-has-icon.-icon-right > select.c-select.-icon + .c-float-container__icon.-right.js-tooltip

Ausgewähltes Prüfzertifikat löschen
Show Code
html
<div class="c-float-container -has-select -has-icon -icon-right">
    <label class="c-label" for="REPLACE_ID_09">Floating Label</label>
    <select class="c-select -icon" id="REPLACE_ID_09">
        <option value='1'>First item</option>
        <option value='2'>Second item</option>
        <option value='3'>Third item</option>
        <option value='4'>Last item</option>
    </select>
    <div class="c-float-container__icon -right js-tooltip" data-title="Ausgewähltes Prüfzertifikat löschen"
         data-placement="left">
        <span class="fa fa-info-circle" aria-hidden="true"></span>
        <span class="h-sr-only">Ausgewähltes Prüfzertifikat löschen</span>
    </div>
</div>

Select With Inline-Btn ​

.c-float-container.-has-select.-has-icon.-has-btn > select.c-select + button.c-btn.-square-btn.-input

Show Code
html
<div class="c-float-container -has-icon -has-btn -has-select -is-active m-t-s">
    <div class="c-float-container__icon">
        <span class="far fa-sliders-h" aria-hidden="true"></span>
    </div>
    <label class="c-label -redesign" for="REPLACE_ID10">Filter auswählen</label>
    <select class="c-select" id="REPLACE_ID10" name="filter-auswahl">
       <option value='1'>First item</option>
        <option value='2'>Second item</option>
        <option value='3'>Third item</option>
        <option value='4'>Last item</option>
    </select>
    <button type="button" class="c-btn -square-btn -primary -input -redesign">
        <span class="fa fa-trash" aria-hidden="true"></span>
        <span class="h-sr-only">Ausgewählten Filter löschen</span>
    </button>
</div>

Fake Select ​

TIP

This is a fake select field without any functionality, using the class .c-fake-select. Sometimes we just need to display selected values in a styled way, without the need for a real select or select2.

See Fake Select2.

Select "Old-Style" ​

TIP

This is the old select style that is still in use in some parts of the application. New modules should use the new style above.

.c-select.-old

Show Code
html
<select class="c-select -old" name="opts">
    <option value='1'>First item</option>
    <option value='2'>Second item</option>
    <option value='3'>Third item</option>
    <option value='4'>Lorem Ipsum</option>
    <option value='5'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
    <option value='6'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
    <option value='7'>adipisici elit</option>
    <option value='8'>Last item</option>
</select>

Color Modifiers ​

.c-select.-old.-white
.c-select.-old.-error
.c-select.-old.-highlight

Show Code
html
<select class="c-select -old -white">
    <option value='1'>mg</option>
    <option value='2'>g</option>
    <option value='3'>I.E.</option>
</select>
<select class="c-select -old -error">
    <option value='1'>mg</option>
    <option value='2'>g</option>
    <option value='3'>I.E.</option>
</select>
<select class="c-select -old -highlight">
    <option value='1'>mg</option>
    <option value='2'>g</option>
    <option value='3'>I.E.</option>
</select>

For more variants and modifiers

see Input Wraps with Prefixes, Unit-(Selects) or Icons

Copyright © 2024 - present Pharma4u