Select boxes

.Select

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

Example

Markup

  1. <label class="Select ">
  2.     <select>
  3.         <option>May</option>
  4.         <option>June</option>
  5.         <option selected="selected">July</option>
  6.         <option>August</option>
  7.         <option>September</option>
  8.     </select>
  9. </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

  1. <label class="Select [modifier class]">
  2.     <select>
  3.         <option>May</option>
  4.         <option>June</option>
  5.         <option selected="selected">July</option>
  6.         <option>August</option>
  7.         <option>September</option>
  8.     </select>
  9. </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

Markup

  1. <div class="AdvancedSelect">
  2.   <input class="AdvancedSelect-input Formrow-input" type="text" value="Select" readonly="readonly"/>
  3.  
  4.   <ul class="AdvancedSelect-list js-cclist">
  5.     <li class="AdvancedSelect-item">
  6.         <p class="AdvancedSelect-title">VISA</p>
  7.         <p class="AdvancedSelect-desc">xxxx-xxxx-xxxx-7541</p>
  8.     </li>
  9.     <li class="AdvancedSelect-item">
  10.         <p class="AdvancedSelect-title">MASTER</p>
  11.         <p class="AdvancedSelect-desc">xxxx-xxxx-xxxx-1106</p>
  12.     </li>
  13.     <li class="AdvancedSelect-item">
  14.         <p class="AdvancedSelect-title">AMEX</p>
  15.         <p class="AdvancedSelect-desc">xxxx-xxxx-xxxx-3847</p>
  16.     </li>
  17.   </ul>
  18. </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

Markup

  1. <div class="AdvancedSelect AdvancedSelect--images js-langlist">
  2.     <span class="AdvancedSelect-image Flag Flag--en-gb"></span>
  3.     <input class="AdvancedSelect-input Formrow-input" type="text" title="English - International" value="English - International" readonly="readonly"/>
  4.     <ul class="AdvancedSelect-list">
  5.         <li class="AdvancedSelect-item">
  6.             <span class="AdvancedSelect-image Flag Flag--en-gb Flag--large"></span>
  7.             <p class="AdvancedSelect-title">English</p>
  8.             <p class="AdvancedSelect-desc">International</p>
  9.         </li>
  10.         <li class="AdvancedSelect-item">
  11.             <span class="AdvancedSelect-image Flag Flag--sv-se Flag--large"></span>
  12.             <p class="AdvancedSelect-title">Swedish</p>
  13.             <p class="AdvancedSelect-desc">Sweden</p>
  14.         </li>
  15.         <li class="AdvancedSelect-item">
  16.             <span class="AdvancedSelect-image Flag Flag--da-dk Flag--large"></span>
  17.             <p class="AdvancedSelect-title">Danish</p>
  18.             <p class="AdvancedSelect-desc">Denmark</p>
  19.         </li>
  20.         <li class="AdvancedSelect-item">
  21.             <span class="AdvancedSelect-image Flag Flag--no Flag--large "></span>
  22.             <p class="AdvancedSelect-title">Norwegian</p>
  23.             <p class="AdvancedSelect-desc">Norway</p>
  24.         </li>
  25.     </ul>
  26. </div>

Selecting folders in a filetree

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

Example

Markup

  1. <div class="AdvancedSelect Filetree">
  2.     <input class="AdvancedSelect-input Formrow-input" type="text" value="/lnxtest193.org/public_html" readonly="readonly"/>
  3.     <ul class="AdvancedSelect-list">
  4.         <li>
  5.             <div class="Filetree-folderlist Filetree-folderlist--dark">
  6.               <ul>
  7.                   <li class="Filetree-dir Filetree-dir--expanded">
  8.                       <a class="Filetree-item Icon Icon--folder" rel="root/" href="javascript:void(0);">root</a>
  9.                       <ul style="display: block;" class="Filetree-dirlist">
  10.                           <li class="Filetree-dir">
  11.                               <a class="Filetree-item Icon Icon--folder" rel="root/testactive1.org/" href="javascript:void(0);">testactive1.org</a>
  12.                           </li>
  13.                           <li class="Filetree-dir Filetree-dir--expanded">
  14.                               <a class="Filetree-item Icon Icon--folder" rel="root/lnxtest193.org/" href="javascript:void(0);" style="">lnxtest193.org</a>
  15.                               <ul style="display: block;" class="Filetree-dirlist">
  16.                                   <li class="Filetree-dir Filetree-dir--expanded Filetree-dir--selected">
  17.                                       <a class="Filetree-item Icon Icon--folder" rel="root/lnxtest193.org/public_html/" href="javascript:void(0);" style="font-weight: bold;">public_html</a>
  18.                                   </li>
  19.                                   <li class="Filetree-dir">
  20.                                       <a class="Filetree-item Icon Icon--folder" rel="root/lnxtest193.org/data/" href="javascript:void(0);">data</a>
  21.                                       </li>
  22.                                   <li class="Filetree-dir">
  23.                                       <a class="Filetree-item Icon Icon--folder" rel="root/lnxtest193.org/logs/" href="javascript:void(0);">logs</a>
  24.                                   </li>
  25.                               </ul>
  26.                           </li>
  27.                           <li class="Filetree-dir">
  28.                               <a class="Filetree-item Icon Icon--folder" rel="root/lnxtest194.org/" href="javascript:void(0);">lnxtest194.org</a>
  29.                           </li>
  30.                       </ul>
  31.                   </li>
  32.               </ul>
  33.           </div>
  34.         </li>
  35.     </ul>
  36. </div>