Select boxes

.Select

The basic select box component, Select, adds some custom style to the select element, such as the arrow.

Example

Markup

<label class="Select ">
    <select>
        <option>May</option>
        <option>June</option>
        <option selected="selected">July</option>
        <option>August</option>
        <option>September</option>
    </select>
</label>

Auto width

Select inputs can be styled with Select--autowidth.

Modifiers

Select--autowidth
When the input should adapt to the content of the list

Markup

<label class="Select [modifier class]">
    <select>
        <option>May</option>
        <option>June</option>
        <option selected="selected">July</option>
        <option>August</option>
        <option>September</option>
    </select>
</label>

Advanced select box

.AdvancedSelect

Advanced select boxes are used for dropdowns where full theme customization and ability to add more complex content is needed.

Example

  • VISA

    xxxx-xxxx-xxxx-7541

  • MASTER

    xxxx-xxxx-xxxx-1106

  • AMEX

    xxxx-xxxx-xxxx-3847

Markup

<div class="AdvancedSelect">
  <input class="AdvancedSelect-input Formrow-input" type="text" value="Select" readonly="readonly"/>

  <ul class="AdvancedSelect-list js-cclist">
    <li class="AdvancedSelect-item">
        <p class="AdvancedSelect-title">VISA</p>
        <p class="AdvancedSelect-desc">xxxx-xxxx-xxxx-7541</p>
    </li>
    <li class="AdvancedSelect-item">
        <p class="AdvancedSelect-title">MASTER</p>
        <p class="AdvancedSelect-desc">xxxx-xxxx-xxxx-1106</p>
    </li>
    <li class="AdvancedSelect-item">
        <p class="AdvancedSelect-title">AMEX</p>
        <p class="AdvancedSelect-desc">xxxx-xxxx-xxxx-3847</p>
    </li>
  </ul>
</div>

Enhancing select items with images

.AdvancedSelect--images

By using the modifier AdvancedSelect--images you can enhance an advanced select box with images representing each item, e.g. flags for choosing language.

Example

  • English

    International

  • Swedish

    Sweden

  • Danish

    Denmark

  • Norwegian

    Norway

Markup

<div class="AdvancedSelect AdvancedSelect--images js-langlist">
    <span class="AdvancedSelect-image Flag Flag--en-gb"></span>
    <input class="AdvancedSelect-input Formrow-input" type="text" title="English - International" value="English - International" readonly="readonly"/>
    <ul class="AdvancedSelect-list">
        <li class="AdvancedSelect-item">
            <span class="AdvancedSelect-image Flag Flag--en-gb Flag--large"></span>
            <p class="AdvancedSelect-title">English</p>
            <p class="AdvancedSelect-desc">International</p>
        </li>
        <li class="AdvancedSelect-item">
            <span class="AdvancedSelect-image Flag Flag--sv-se Flag--large"></span>
            <p class="AdvancedSelect-title">Swedish</p>
            <p class="AdvancedSelect-desc">Sweden</p>
        </li>
        <li class="AdvancedSelect-item">
            <span class="AdvancedSelect-image Flag Flag--da-dk Flag--large"></span>
            <p class="AdvancedSelect-title">Danish</p>
            <p class="AdvancedSelect-desc">Denmark</p>
        </li>
        <li class="AdvancedSelect-item">
            <span class="AdvancedSelect-image Flag Flag--no Flag--large "></span>
            <p class="AdvancedSelect-title">Norwegian</p>
            <p class="AdvancedSelect-desc">Norway</p>
        </li>
    </ul>
</div>

Selecting folders in a filetree

For selecting folders AdvancedSelect can be used in combination with the Filetree component.

Example

Markup

<div class="AdvancedSelect Filetree">
    <input class="AdvancedSelect-input Formrow-input" type="text" value="/lnxtest193.org/public_html" readonly="readonly"/>
    <ul class="AdvancedSelect-list">
        <li>
            <div class="Filetree-folderlist Filetree-folderlist--dark">
              <ul>
                  <li class="Filetree-dir Filetree-dir--expanded">
                      <a class="Filetree-item Icon Icon--folder" rel="root/" href="javascript:void(0);">root</a>
                      <ul style="display: block;" class="Filetree-dirlist">
                          <li class="Filetree-dir">
                              <a class="Filetree-item Icon Icon--folder" rel="root/testactive1.org/" href="javascript:void(0);">testactive1.org</a>
                          </li>
                          <li class="Filetree-dir Filetree-dir--expanded">
                              <a class="Filetree-item Icon Icon--folder" rel="root/lnxtest193.org/" href="javascript:void(0);" style="">lnxtest193.org</a>
                              <ul style="display: block;" class="Filetree-dirlist">
                                  <li class="Filetree-dir Filetree-dir--expanded Filetree-dir--selected">
                                      <a class="Filetree-item Icon Icon--folder" rel="root/lnxtest193.org/public_html/" href="javascript:void(0);" style="font-weight: bold;">public_html</a>
                                  </li>
                                  <li class="Filetree-dir">
                                      <a class="Filetree-item Icon Icon--folder" rel="root/lnxtest193.org/data/" href="javascript:void(0);">data</a>
                                      </li>
                                  <li class="Filetree-dir">
                                      <a class="Filetree-item Icon Icon--folder" rel="root/lnxtest193.org/logs/" href="javascript:void(0);">logs</a>
                                  </li>
                              </ul>
                          </li>
                          <li class="Filetree-dir">
                              <a class="Filetree-item Icon Icon--folder" rel="root/lnxtest194.org/" href="javascript:void(0);">lnxtest194.org</a>
                          </li>
                      </ul>
                  </li>
              </ul>
          </div>
        </li>
    </ul>
</div>