Hiding gray "[]" around search in a multi-select box - Safari; works fine on Firefox/Chrome

[E.L. Cropredy]

Select2 4.0 jQuery plugin

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

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

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>

[Kevin Brown]

Supposedly this only requires a simple CSS change, it's being tracked at https://github.com/select2/select2/issues/3459.

Unfortunately I don't have Safari, so I can't test if the pull request at https://github.com/select2/select2/pull/3476 fixes the problem.

--
You received this message because you are subscribed to the Google Groups "select2" group.
To unsubscribe from this group and stop receiving emails from it, send an email to select2+u...@googlegroups.com.
To post to this group, send email to sel...@googlegroups.com.
Visit this group at http://groups.google.com/group/select2.
For more options, visit https://groups.google.com/d/optout.

[E.L. Cropredy]

Thanks Kevin -- the CSS trick works great

--
You received this message because you are subscribed to a topic in the Google Groups "select2" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/select2/bbf4UujHmgE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to select2+u...@googlegroups.com.