title: Making a <select> show as a scrollable list with only one selection?
body: <p>I have a <code>&lt;select&gt;</code> list that looks like this.</p>
  
  <p><img src="https://i.imgur.com/9JYq888.png" alt="simplelist"></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;select&gt;
      &lt;option&gt;Option 1&lt;/option&gt;
      &lt;option&gt;Option 2&lt;/option&gt;
      &lt;option&gt;Option 3&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I want it to look like this.</p>
  
  <p><img src="https://i.imgur.com/6aOJRm4.png" alt="multiplelist"></p>
  
  <p>Now, this can be achieved with adding the <code>multiple</code> and <code>size</code> attributes.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;select multiple size="3"&gt;
      &lt;option&gt;Option 1&lt;/option&gt;
      &lt;option&gt;Option 2&lt;/option&gt;
      &lt;option&gt;Option 3&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>But this also allows the user to select more than one element. Just <code>size="3"</code> doesn't work (at least in Firefox 28.0); it is displayed as a dropdown list.</p>
  
  <p>The specification <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Attributes" rel="noreferrer">here</a> doesn't seem to include any attribute that could do the trick, although it does state that</p>
  
  <blockquote>
    <p>Browsers are not required to present a select elements as a scrolled list box.</p>
  </blockquote>
  
  <p>But is there any way to make it look how I want but still only allow a single selection? A simple enough workaround using JavaScript is also OK for me.</p>