使用jQuery的selectize插件时如何自定义输入框外观？

问题原因说明 #

你用的Selectize插件在初始化完成后，原本你写的#customer_codes_served输入框会被设置为隐藏（你代码里也标注了display: none），插件会自动插入一套独立的DOM结构来实现标签输入、下拉选择的交互。你直接给原隐藏输入框新增CSS类、修改样式不仅不会生效，要是不小心覆盖了Selectize的核心功能样式，还会导致交互功能异常。

正确修改样式的方案 #

方法1：直接覆盖Selectize默认样式（适合全局统一所有Selectize输入框样式） #

你直接在自定义CSS文件中写对应选择器的样式即可，常用可自定义的属性参考如下：

/* 输入框容器样式 */
.selectize-control.multi .selectize-input {
  min-height: 48px; /* 自定义最小高度 */
  border: 2px solid #e5e7eb; /* 自定义边框宽度、颜色 */
  padding: 6px 12px;
  line-height: 1.5;
}
/* 输入框聚焦状态样式 */
.selectize-control.multi .selectize-input.focus {
  border-color: #165dff;
  box-shadow: none; /* 可关闭默认聚焦阴影 */
}
/* 下拉选项面板样式 */
.selectize-dropdown {
  border: 2px solid #e5e7eb;
  border-radius: 4px;
}

如果自定义样式不生效，把你的自定义CSS放在Selectize自带CSS文件的后面加载，或者给属性加!important提升优先级即可，不会影响原有功能。

方法2：给当前实例单独加自定义类（适合只修改这一个输入框的样式） #

如果不想影响其他Selectize输入框的样式，可以在初始化配置中加className参数，给当前实例容器绑定自定义类：
修改你的JS初始化代码如下：

jQuery(document).ready(function() {
    $('#customer_codes_served').selectize({
        delimiter: ',',
        persist: false,
        className: 'customer-code-selectize', // 新增这一行，自定义类名
        create: function(input) {
            return {
                value: input,
                text: input
            }
        },
        onBlur : function(input){                    
            agent_app_change_hander(document.getElementById("customer_codes_served"), "customer_codes_served", "customer_codes_served", "text");
        },
    });
});

之后就可以写单独针对这个输入框的样式：

.customer-code-selectize .selectize-input {
  min-height: 48px;
  border: 2px solid #e5e7eb;
}

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