如何始终显示在HTML Select中选择的第一个选项？

Question

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:

   .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;
    } 

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

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.

Answer 1

Thanks everyone for taking time to read my question and for your valuable suggestion. But here I've found a solution to my problem. Now, I'm using a javascript function which will make the selectedIndex = 0 after each selection made.

here is the code:

        function drpChanged(ddl) {
        var drpInsertMerge = document.getElementById("drpInsertMerge");

        var selectedText = drpInsertMerge.options[drpInsertMerge.selectedIndex].innerHTML;
        var selectedValue = drpInsertMerge.value;

        drpInsertMerge.selectedIndex = 0;

        return false;
    }

  <select id="drpInsertMerge" onchange="drpChanged(this);">
        <option selected>{}</option>
        <option value="Phone Number">Phone Number</option>
        <option value="Email Address">Email Address</option>
        <option value="Given Name">Given Name</option>
        <option value="Family Name">Family Name</option>
        <option value="Display Name">Display Name</option>
  </select>

Thanks again everyone.

Answer 2

way that you are going to design is wrong.This might be a way to increase the width of your styled class in css.

  .styled select {
    background: transparent;
    width: 500px;
    font-size: 16px;
    border: 1px solid #ccc;
    height: 34px;
}

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

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