Question

Select2 4.0 jQuery插件

在（Mac）Chrome或Firefox中，使用默认的选定值，多重选择框看起来很好：

但是在（Mac）Safari中它看起来如下所示（用于输入搜索字词的<input>元素周围的浅灰色括号。）

摆脱这种视觉神器的首选方式（即select2选项或select2 css）是什么：[]？

select2生成的HTML元素是：

<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>

我尝试了以下两个（现已注释掉）select2选项无效：

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

唯一被覆盖的select2类样式是：

<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>

Answer 1

答案来自select2 gitHub Issues - Select box not displayed properly in safari #3459

具体来说，这行css：

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

Per Kevin Brown，增加到4.01里程碑

Select2 jQuery插件 - ＆＃34;多个＆＃34; - 在搜索框周围删除灰色[] - 仅在Safari中发生

1 个答案: