PatternLab (1.0.31)

Appearance

Old Select ​

.c-select.-old + .js-select2 (optional)

Select fields are used to select a single value from a list of options. This component is about the old (deprecated) style of select fields, the new style is described in Select2.

This documentation covers the styling of the native select element as well as the styling and functionality of the Select2 dropdown.

Select vs. Select2 ​

Native Select ​

Use the classes .c-select.-old on a select element to get the default styling:

Show Code
html
<select class="c-select -old" name="opts">
  <option value="6">Kapseln</option>
  <option value="7">Tabletten</option>
  <option value="8">Ampullen</option>
  <option value="9">Milligramm</option>
  <option value="10">Einheiten</option>

  <option value="11">Messlöffel (gestrichen)</option>
  <option value="12">Anwendungseinheiten</option>
  <option value="13">Inhalationsbeutel</option>
  <option value="14">Tropfen pro Minute</option>
  <option value="15">Zylinderampullen</option>

  <option value="16">Standardisierte Stammlösung (10%)</option>
  <option value="17">Gebrauchsfertige Zubereitung (flüssig)</option>
  <option value="18">Wirkstoffkonzentrat zur Infusionslösung</option>
  <option value="19">Prüfzertifikat gemäß DAC/NRF-Vorgabe</option>
  <option value="20">Individuelle Rezepturkomponente (Sonderanfertigung)</option>
</select>

With Select2 ​

Use the class js-select2 on a select element if you want to initialize Select2 and add the attribute data-additional-classes="-old" to the select element to get the default styling.

Show Code
html
<select class="js-select2" name="default-select" data-additional-classes="-old">
  <option value="6">Kapseln</option>
  <option value="7">Tabletten</option>
  <option value="8">Ampullen</option>
  <option value="9">Milligramm</option>
  <option value="10">Einheiten</option>

  <option value="11">Messlöffel (gestrichen)</option>
  <option value="12">Anwendungseinheiten</option>
  <option value="13">Inhalationsbeutel</option>
  <option value="14">Tropfen pro Minute</option>
  <option value="15">Zylinderampullen</option>

  <option value="16">Standardisierte Stammlösung (10%)</option>
  <option value="17">Gebrauchsfertige Zubereitung (flüssig)</option>
  <option value="18">Wirkstoffkonzentrat zur Infusionslösung</option>
  <option value="19">Prüfzertifikat gemäß DAC/NRF-Vorgabe</option>
  <option value="20">Individuelle Rezepturkomponente (Sonderanfertigung)</option>
</select>

Disabled Select ​

.c-select.-old:disabled or .c-select.-old.-disabled

Show Code
html
<select class="js-select2" disabled="disabled" name="disabled-select" data-additional-classes="-old">
  <option value='1'>mg</option>
  <option value='2'>g</option>
  <option value='3'>I.E.</option>
</select>

Color Classes ​

.c-select.-old + .-white / .-success / .-highlight / .-warning / .-error

Show Code
html
<div class="h-flex h-flex-column gap-s">
  <select class="js-select2" name="opts" data-additional-classes="-old -white">
    <option value='1'>mg</option>
    <option value='2'>g</option>
    <option value='3'>I.E.</option>
  </select>
  <select class="js-select2" name="opts" data-additional-classes="-old -success">
    <option value='1'>mg</option>
    <option value='2'>g</option>
    <option value='3'>I.E.</option>
  </select>
  <select class="js-select2" name="opts" data-additional-classes="-old -highlight">
    <option value='1'>mg</option>
    <option value='2'>g</option>
    <option value='3'>I.E.</option>
  </select>
  <select class="js-select2" name="opts" data-additional-classes="-old -warning">
    <option value='1'>mg</option>
    <option value='2'>g</option>
    <option value='3'>I.E.</option>
  </select>
  <select class="js-select2" name="opts" data-additional-classes="-old -error">
    <option value='1'>mg</option>
    <option value='2'>g</option>
    <option value='3'>I.E.</option>
  </select>
</div>

Fallback Classes ​

Show Code
html
<div class="h-flex h-flex-column gap-s">
  <select class="" name="empty-class-attribute">
    <option value='1' selected>Select Field with Empty Class Attribute</option>
    <option value='2'>Second item</option>
    <option value='3'>Third item</option>
  </select>
  <select class="auto-width" name="fallback-class">
    <option value='1' selected>Select Field with Fallback Class "auto-width"</option>
    <option value='2'>Second item</option>
    <option value='3'>Third item</option>
  </select>
  <select class="inline" name="fallback-class2">
    <option value='1' selected>Select Field with Fallback Class "inline"</option>
    <option value='2'>Second item</option>
    <option value='3'>Third item</option>
  </select>
  <select name="no-class-attribute">
    <option value='1' selected>Select Field without Class Attribute</option>
    <option value='2'>Second item</option>
    <option value='3'>Third item</option>
  </select>
</div>

Word Wrapping Demo ​

Show Code
html
<div class="h-flex h-flex-row gap-l">
  <div class="h-width-20">
    <label for="old-select-wrap">With Select2</label>
    <select class="js-select2" name="old-select-wrap" data-additional-classes="-old">
      <option value='1'>loremipsumdolorsitametconsecteturadipisicielit</option>
      <option value='2'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
    </select>
  </div>
  <div class="h-width-20">
    <label for="old-select-wrap2">Without Select2</label>
    <select class="c-select -old" name="old-select-wrap-2">
      <option value='1'>loremipsumdolorsitametconsecteturadipisicielit</option>
      <option value='2'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
    </select>
  </div>
</div>

2026 - Pharma4u