<p>The<a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/select" target="_blank">
  HTML select</a> (&lt;select&gt;) element represents a control that presents a menu of options.
  The options within the menu are represented by &lt;option&gt; elements, which can be grouped by
  &lt;optgroup&gt; elements. Options can be pre-selected for the user.</p>

<p>The Material Design Lite Ext (MDLEXT) <strong>select field</strong> component is an enhanced version of the standard
  HTML &lt;select&gt; element. A select field consists of a horizontal line indicating where keyboard input
  can occur and, typically, text that clearly communicates the intended contents of the select field.
  An icon (at the right hand side) indicates that the select field has user selectable options.</p>

<p><strong>Note: </strong>
  The select field can for some browser and OS combinations, e.g. FireFox and OSX, be off by 2 pixels compared to the
  input field. There is no way to fix this, as far as I know, without setting an explicit height on both field types.
  Since MDL does not set a specific height of the text field, it can not be done for the select field either.
  If alignment is required, the user must in his/hers design set a specific height both for textfields and selectfields.
</p>

<style scoped>
  .selectelement-demo-container {
  }
  .selectelement-demo-container .mdl-cell {
    padding: 0 4px 16px 0;
  }
  .selectelement-demo-container .mdl-cell p {
    margin-bottom: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>

<div class = "selectelement-demo-container">

  <div class="mdl-grid mdl-grid--no-spacing">

    <div class="mdl-cell mdl-cell--3-col">
      <p>Selectfield component</p>
      <div class="mdlext-selectfield mdlext-js-selectfield">
        <select class="mdlext-selectfield__select">
          <option value=""></option>
          <option value="option1">option 1</option>
          <option value="option2">option 2</option>
          <option value="option3">option 3</option>
          <option value="option4">option 4</option>
          <option value="option5">option 5</option>
          <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option>
        </select>
        <label class="mdlext-selectfield__label">Profession</label>
      </div>
    </div>

    <div class="mdl-cell mdl-cell--3-col">
      <p>Textfield component</p>
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text">
        <label class="mdl-textfield__label">... to check alignment</label>
      </div>
    </div>

    <div class="mdl-cell mdl-cell--3-col">
      <p>Selectfield component with floating label</p>
      <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
        <select class="mdlext-selectfield__select">
          <option value=""></option>
          <option value="option1">option 1</option>
          <option value="option2">option 2</option>
          <option value="option3">option 3</option>
          <option value="option4">option 4</option>
          <option value="option5">option 5</option>
          <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option>
        </select>
        <label class="mdlext-selectfield__label">Profession</label>
      </div>
    </div>

    <div class="mdl-cell mdl-cell--3-col">
      <p>Disabled selectfield component</p>
      <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
        <select class="mdlext-selectfield__select" disabled>
          <option value=""></option>
          <option value="option1">option 1</option>
          <option value="option2">option 2</option>
          <option value="option3">option 3</option>
          <option value="option4">option 4</option>
          <option value="option5">option 5</option>
          <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option>
        </select>
        <label class="mdlext-selectfield__label">Profession</label>
      </div>
    </div>

    <div class="mdl-cell mdl-cell--3-col">
      <p>Unstyled select element</p>
      <select style="width: 100%;">
        <option value=""></option>
        <option value="option1">option 1</option>
        <option value="option2">option 2</option>
        <option value="option3">option 3</option>
        <option value="option4">option 4</option>
        <option value="option5">option 5</option>
        <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option>
      </select>
      <label>Profession</label>
    </div>

    <div class="mdl-cell mdl-cell--3-col">
      <p>Unstyled input element</p>
      <input type="text" style="width: 100%;">
      <label>... to check alignment</label>
    </div>

  </div>
</div>