Select2 jQuery plugin - "multiple" - remove gray [ ] around search box - only happens in Safari

0
votes

Select2 4.0 jQuery plugin

In (Mac) Chrome or Firefox, the multiple select box looks fine with default, selected values:

enter image description here

but in (Mac) Safari it looks like below (light gray bracket around what is the <input> element for typing in a search term.)

enter image description here

What is the preferred way (i.e. select2 option or select2 css) to get rid of this visual artifact: [] ?

The HTML element generated by select2 is this:

<span class="select2 select2-container select2-container--default select2-container--below" dir="ltr" style="width: 110px;">
 <span class="selection">
  <span class="select2-selection select2-selection--multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
   <ul class="select2-selection__rendered">
    <li class="select2-selection__choice" title="Text">
    <li class="select2-selection__choice" title="Video">
    <li class="select2-search select2-search--inline">
     <input class="select2-search__field" type="search" tabindex="-1" autocomplete="off" 
            autocorrect="off" autocapitalize="off" placeholder=""
            spellcheck="false" role="textbox" style="width: 0.75em;"/>
    </li>
   </ul>
  </span>
 </span>

I tried both of the below (now commented out) select2 options to no effect:

$j(".select2").select2({    // we're using the Select2 plugin
    //          minimumResultsForSearch: Infinity           // has no effect on Safari
    //          placeholder: null                           // attempt two - no effect
});

The only select2 class styles overridden are:

<style type="text/css">
    .select2 {                          /* select2 honors width CSS property */ 
                    font-size: xx-small;
                    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice { /* The results container with MSP-chosen values */
                    margin-left: .2em;
                    padding: 0px 2px;
    }
    .select2-results__option { /* The list of available MSP choices */
                    font-size: xx-small;
                    margin-left: .2em;
                    padding: 0px 4px;
    }                   
</style>
1
jquery-select2

1 Answers

0
votes

The answer comes courtesy of select2 gitHub Issues - Select box not displayed properly in safari #3459

Specifically, this line of css:

.select2-search__field {
  -webkit-appearance: textfield;  
}

Per Kevin Brown, added to 4.01 milestone