title: option on select with icon and text when opened and just icon when collapsed
body: <p>I want to create a select-option input on my local web with an icon and text when opened or clicked, and return to just being an icon when collapsed. It doesn't matter if I have to use js, css, or some small plugin. Is that possible? Please tell me how</p>
  <pre><code>&lt;div class=&quot;form-group mb-3&quot;&gt;
    &lt;div class=&quot;input-group&quot;&gt;
      &lt;select class=&quot;select2&quot; id=&quot;pilihan&quot; name=&quot;medsos&quot; style=&quot;width: 73px;&quot; onchange=&quot;chg_kontak()&quot;&gt;
        &lt;option selected disabled value=&quot;medsos&quot;&gt;&lt;/option&gt;
        &lt;option value=&quot;email&quot;&gt;Email&lt;/option&gt;&lt;!-- this is the main problem, I want text with uppercase (Signal, WhatsApp, etc) hidden when select collapsed --&gt;
        &lt;option value=&quot;signal&quot;&gt;Signal&lt;/option&gt;
        &lt;option value=&quot;telegram&quot;&gt;Telegram&lt;/option&gt;
        &lt;option value=&quot;twitter&quot;&gt;Twitter&lt;/option&gt;
        &lt;option value=&quot;whatsapp&quot;&gt;WhatsApp&lt;/option&gt;
      &lt;/select&gt;
      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;oth_contact&quot; name=&quot;oth_contact&quot; placeholder=&quot;kontak lain&quot; required disabled onfocus&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  //Initialize Select2 Elements
  $('.select2').select2()
  
  $(document).on('select2:open', () =&gt; {
    document.querySelector('.select2-search__field').focus();
  });
  
  function chg_kontak() {
    var x = document.getElementById(&quot;pilihan&quot;).value;
    var y = document.getElementById(&quot;oth_contact&quot;);
    if (x == &quot;telegram&quot; | x == &quot;twitter&quot;) {
      y.type = &quot;text&quot;;
      y.placeholder = &quot;@username_anda&quot;;
      y.onfocus = function(){
        y.value = '@';
      }
    }else if (x == &quot;whatsapp&quot; | x == &quot;signal&quot;){
      y.type = &quot;tel&quot;;
      // y.maxlength = &quot;14&quot;;
      y.placeholder = &quot;nomor &quot;+x;
      y.value = '';
      y.onfocus = function(){
        y.value = '';
      }
    }else if (x == &quot;email&quot;){
      y.type = x;
      y.placeholder = &quot;alamat email&quot;;
      y.value = '';
      y.onfocus = function(){
        y.value = '';
      }
    }
    y.removeAttribute(&quot;disabled&quot;);
  }
  
  $(&quot;#pilihan&quot;).select2({
      templateResult: function (idioma) {
      var $span = $(&quot;&lt;span&gt;&lt;img src='&quot;+window.location.origin+&quot;/jala/aset/mycustom/img/icons/&quot;+idioma.id+&quot;.svg' style='width: 27px; padding-bottom: 2px;' /&gt; &quot; + idioma.text + &quot;&lt;/span&gt;&quot;);
      return $span;
    },
      templateSelection: function (idioma) {
      var $span = $(&quot;&lt;span&gt;&lt;img src='&quot;+window.location.origin+&quot;/jala/aset/mycustom/img/icons/&quot;+idioma.id+&quot;.svg' style='width: 27px; padding-bottom: 2px;' /&gt; &quot; + idioma.text + &quot;&lt;/span&gt;&quot;);
      return $span;
    },
    minimumResultsForSearch: Infinity
    // placeholder: &quot;&lt;span&gt;&lt;img src='&quot;+window.location.origin+&quot;/jala/aset/mycustom/img/email.png' height='27' /&gt; dsafsak &lt;/span&gt;&quot; and I can't use my icon as placeholder too, but it's not a big problem
  });
  &lt;/script&gt;
  </code></pre>