Select2插件清除选项显示异常，未修改CSS该如何排查

问题表现 #

可能的故障原因 #

• 第三方样式覆盖问题：你提供的CSS片段中.select2-selection--single .select2-selection__clear 规则设置了font-size: 0，该属性会直接隐藏清除按钮默认显示的×符号。如果你确认没有手动修改过Select2相关CSS，大概率是项目中引入的第三方UI框架、自定义主题样式或者公共全局样式文件覆盖了Select2的默认样式。
• Select2资源版本不匹配：如果页面引入的Select2 JS文件和对应的CSS文件版本不一致，会出现类名不匹配、样式渲染错误的问题，也会导致清除按钮显示异常。
• 父元素样式冲突：可以检查select外层的.form-group、.row等父级元素是否设置了overflow: hidden、不合理的内边距/外边距，可能会将右浮动的清除按钮挤出可视区域或者被其他元素遮挡。
• 初始化配置缺漏：部分版本的Select2开启allowClear: true后，需要给select预置一个空的默认option（<option value=""></option>），否则也会出现清除按钮渲染异常的问题。

临时修复方案 #

你可以在自己的自定义CSS文件中加入以下规则覆盖异常样式：

.select2-selection--single .select2-selection__clear {
  font-size: 1em !important;
}

相关代码参考 #

HTML代码 #

<div class="form-group <?PHP if(form_error('moa')) echo 'has-error'; ?>">
<div class="row">
    <label>Maitre d'ouvrage <span class="text-danger">*</span></label>
    <a href="<?=base_url('societe/ajouter?moa')?>" target="_blank"><p style="float:right;">Ajouter une société</p></a>
</div>
<select class="select-search-ajax" data-url="<?=base_url('societe/moa_json')?>" name="moa">
<?PHP
    foreach($societeMoa as $row) {
        if($chantier->moa==$row->id_contact) {
            ?>
            <option value="<?PHP echo $row->id_contact; ?>" selected="selected"><?PHP echo mb_strtoupper($row->nom_societe).' ('.$row->nom_contact.' '. $row->prenom_contact.')'; ?></option>
            <?PHP
        }
    }
    ?>
</select>
<?php echo form_error('moa','<span class="help-block">','</span>'); ?>
</div>

JS初始化代码 #

$(document).ready(function(){
$('.select-search-ajax').each(function(){
    $(this).select2({
        ajax: {
          url: $(this).attr("data-url"),
          dataType: 'json'
        }, 
        placeholder: 'Selectionnez...',
        allowClear: true,
      });
});
});

内容的提问来源于stack exchange，提问作者HLEB