title: Customize select2 multi select
body: <p>I'm creating a multi select field using select2 as follows.</p>
  
  <p>I want to make it so the placeholder ("Search items") always seen in the field even after I already select items. I tried this to put new placeholder after I select any choice on the dropdown:</p>
  
  <pre><code>$(".select2-results__option").click(function() {
      console.log("x");
      $(document).find(".select2-search--inline .select2-search__field").attr("placeholder", "Search items");
  });
  </code></pre>
  
  <p>But unfortunately it doesn't even trigger the console log.</p>
  
  <p>My other question is, can I make it so the ("x") on the pills put on the right of the texts instead of on the left?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    
    $(".js-example-basic-multiple").select2({
      placeholder: "Select items"
    });
  });
  
  $(".select2-results__option").click(function() {
    console.log("x");
    $(document).find(".select2-search--inline .select2-search__field").attr("placeholder", "Search items");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.select2-selection {
    height: 34px !important; 
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    border-radius: 0 !important;
    border: solid 1px #c4c4c4 !important;
    padding-left: 4px;
  }
  
  .select2-selection--multiple {
    height: 154px !important;
    width: 366px !important;
  }
  
  .select2-selection__choice {
    height: 40px;
    line-height: 40px;
    padding-right: 16px !important;
    padding-left: 16px !important;
    background-color: #CAF1FF !important;
    color: #333 !important;
    border: none !important;
    border-radius: 3px !important;
  }
  
  .select2-search--inline .select2-search__field {
    line-height: 40px;
    color: #333;
  }
  
  .select2-container:hover,
  .select2-container:focus,
  .select2-container:active,
  .select2-selection:hover,
  .select2-selection:focus,
  .select2-selection:active {
    outline-color: transparent;
    outline-style: none;
  }
  
  .select2-results__options li {
    display: block; 
  }
  
  .select2-selection__rendered {
    transform: translateY(2px);
  }
  
  .select2-selection__arrow {
    display: none;
  }
  
  .select2-results__option--highlighted {
    background-color: #CAF1FF !important;
    color: #333 !important;
  }
  
  .select2-dropdown {
    border-radius: 0 !important;
    box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15) !important;
    border: none !important;
    margin-top: 4px !important;
    width: 366px !important;
  }
  
  .select2-results__option {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    line-height: 24px !important;
    vertical-align: middle !important;
    padding-left: 8px !important;
  }
  
  .select2-results__option[aria-selected="true"] {
    background-color: #eee !important; 
  }
  
  .select2-search__field {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    font-size: 13px;
    padding-left: 8px !important;
    border-color: #c4c4c4 !important;
  }
  
  .select2-selection__placeholder {
    color: #c4c4c4 !important; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-unit form-divided"&gt;
        &lt;label for="emp-id" class="form-input-label"&gt;Pill Box&lt;/label&gt;
        &lt;select class="js-example-basic-multiple" name="states[]" multiple="multiple"&gt;
          &lt;option value="a1"&gt;Item A1&lt;/option&gt;
          &lt;option value="a2"&gt;Item A2&lt;/option&gt;
          &lt;option value="b1"&gt;Item B1&lt;/option&gt;
          &lt;option value="c1"&gt;Item C1&lt;/option&gt;
          &lt;option value="c2"&gt;Item C2&lt;/option&gt;
          &lt;option value="c2"&gt;Item C3&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>