How to always show the first option as selected in HTML Select?
<p>I've an HTML select where I want to achieve something when I select any option from the select menu it should not show those selected option into the box instead it has to show the first option always regardless of whatever user chose from the option inside. 
Here is my CSS code for the div and Select:</p>

<pre><code>   .styled select {
        background: transparent;
        width: 140px;
        font-size: 16px;
        border: 1px solid #ccc;
        height: 34px;
    }

    .styled {
        width: 40px;
        height: 34px;
        border: 1px solid #46b8da;
        border-radius: 3px;
        overflow: hidden;
        background-color: #5bc0de;
    } 

  &lt;div class="styled"&gt;
     &lt;select id="drpInsertMerge" onchange="drpChanged(this);"&gt;
            &lt;option selected&gt;{}&lt;/option&gt;
            &lt;option value="Phone Number"&gt;Phone Number&lt;/option&gt;
            &lt;option value="Email Address"&gt;Email Address&lt;/option&gt;
            &lt;option value="Given Name"&gt;Given Name&lt;/option&gt;
            &lt;option value="Family Name"&gt;Family Name&lt;/option&gt;
            &lt;option value="Display Name"&gt;Display Name&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
</code></pre>

<p>Here, from the above code you can see that the dropdown box or the div is actually smaller than the select menu (which is required in my case) which matches with the first option {} but if I chose any other option from the below then most of the text is getting cut which is not good looking that's why I need your help or suggestion to know how to achieve this. Thanks.</p>