select-dropdown is what is known as COMBOBOX in Windows.

that have this behavior applied by default (see master_style_sheet):

• <select>…</select>
• <select size=1>…</select>
• <select type=“select-dropdown”>…</select>
• <widget type=“select-dropdown”>…</widget>

Dropdown select is a compound control. When this behavior is applied to the element it builds following structure:

  <select> 
    <caption>...</caption>
    <button>...</button>
    <popup>
      <option>...</option> 
      <option>...</option>
      <option>...</option>
    </popup>
  </select>

Where caption, button and popup correspond to separate parts of the combobox : first second third

In h-smile engine all components of the select are ordinary DOM elements so styleable through CSS.

Select may have arbitrary markup inside. Elements that have special meaning:

• <option> - selectable item of the list.
• any other element with attribute role=“option” - such element will play a role of option - selectable item.

role=“option” allows to use, as an example, tables:

<select> 
  <table> ...
     <td role=option>First</td>
     <td role=option>Second</td>
     ...
  </table>
</select>

this behavior knows about:

• editable - if defined allows to edit current selected element. This simply means that <caption> is getting behavior:edit applied. See master_style_sheet.
• novalue=“text” - if there is no <option selected> then it shows text provided by the novalue attribute.

Besides of standard set of events (mouse, keyboard, focus) behavior:select generates:

• SELECT_SELECTION_CHANGED event - selection was changed due to user interaction.

• non-editable select: value here is a value of the selected <option> - either content of value attribute or text of the <option>.
• editable select: value here is current content (text) of the <caption> sub-element.

• UP / PAGE-UP - previous item;
• DOWN / PAGE-DOWN- next item;
• CTRL + DOWN - shows popup list;
• HOME - first item in the list;
• END - last item in the list;