title: Show a different text for the selected option for `<select>`s
body: <p>I want the text that's displayed in the <code>&lt;select&gt;</code> to be different from the selected <code>&lt;option&gt;</code>'s text. I have limited width to work with, so if I display all the text in the <code>&lt;option&gt;</code>, then some text with be cut off.</p>
  
  <p>For example, if my markup is this:</p>
  
  <pre><code>&lt;select&gt;
    &lt;option&gt;Open (some description)&lt;/option&gt;
    &lt;option&gt;Closed (a bunch of text&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>When the first option is selected, I want to show only the word "Open" to save space. I can't just use Javascript to replace the text because if the user opens the select, then they'll see the shortened text.</p>
  
  <p>Is there a way to do this using the <code>&lt;select&gt;</code> tag (i.e. without using a custom selector)?</p>