AngularJS ui-select多选下拉框搜索加载Spinner不显示问题求助

问题出在select2主题下，单选和多选下拉框的搜索框DOM结构不同，原CSS选择器仅覆盖了单选场景，未适配多选结构。

修改后的CSS代码 #

/*Custom css gif loader for search input - 适配单选+多选*/
.ui_select_input_spinner .ui-select-search,
.ui_select_input_spinner .select2-search__field {
    background-image: url('../../areas/commoncontrols/scripts/fileviwer/content/css/select2-spinner.gif');
    background: url('../../areas/commoncontrols/scripts/fileviwer/content/css/select2-spinner.gif') no-repeat right center, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
    background: url('../../areas/commoncontrols/scripts/fileviwer/content/css/select2-spinner.gif') no-repeat right center, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
    background: url('../../areas/commoncontrols/scripts/fileviwer/content/css/select2-spinner.gif') no-repeat right center, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
    background: url('../../areas/commoncontrols/scripts/fileviwer/content/css/select2-spinner.gif') no-repeat right center, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
    background-size: 16px 16px; /* 可选：调整Spinner图标大小，避免变形 */
}

/* Hide the search icon when loading - 适配单选+多选 */
.ui_select_input_spinner .select2-search::after,
.ui_select_input_spinner .select2-search::before {
    visibility: hidden;
}

问题原因说明 #

select2主题对单选和多选的DOM结构做了差异化处理：

• 单选下拉框：搜索框直接使用.ui-select-search类，与原CSS选择器匹配
• 多选下拉框：搜索框嵌套在.select2-search容器内，使用.select2-search__field类，原CSS未覆盖该选择器

你的JS逻辑是正确的（已给外层容器添加ui_select_input_spinner类），只需扩展CSS选择器覆盖两种场景即可。

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