xmSelect 样式修改-CFANZ编程社区

xmSelect 是 Layui 的一个多功能下拉选择组件，支持多选、搜索等功能。以下是修改 xmSelect 样式的几种方法：

1. 基本样式修改

修改宽度和高度

/* 修改整体宽度 */
.xm-select {
  width: 300px !important;
}

/* 修改输入框高度 */
.xm-select-body {
  height: 40px !important;
  line-height: 40px !important;
}

/* 修改下拉框高度 */
.xm-select-dropdown {
  max-height: 300px !important;
}

修改颜色主题

/* 修改主色调 */
.xm-select {
  --theme-color: #FF5722 !important;
}

/* 修改选中项背景色 */
.xm-select-content .xm-select-option.selected {
  background-color: #f0f0f0 !important;
}

/* 修改悬停颜色 */
.xm-select-content .xm-select-option:hover {
  background-color: #e6f7ff !important;
}

2. 标签样式修改

/* 修改已选标签样式 */
.xm-select-tag {
  background-color: #1890ff !important;
  color: white !important;
  border-radius: 4px !important;
}

/* 修改标签关闭按钮 */
.xm-select-tag-close {
  color: white !important;
}

/* 修改标签间距 */
.xm-select-tag + .xm-select-tag {
  margin-left: 5px !important;
}

3. 下拉框样式修改

/* 修改下拉框边框 */
.xm-select-dropdown {
  border: 1px solid #d9d9d9 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* 修改选项字体大小 */
.xm-select-option {
  font-size: 14px !important;
  padding: 8px 12px !important;
}

/* 修改搜索框样式 */
.xm-select-search {
  padding: 8px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

4. 通过配置项修改样式

layui.use('xmSelect', function(){
  var xmSelect = layui.xmSelect;
  
  xmSelect.render({
    el: '#select1',
    style: {
      // 配置样式
      height: '40px',
      width: '100%',
    },
    theme: {
      // 配置主题色
      color: '#1890ff',
    }
  });
});

5. 自定义模板

xmSelect.render({
  el: '#select1',
  template({ item, sels, name, value }){
    return `<div style="display: flex; align-items: center;">
      <img src="${item.icon}" style="width: 20px; height: 20px; margin-right: 5px;">
      <span>${item.name}</span>
    </div>`;
  }
});

6. 响应式样式调整

/* 在小屏幕上调整样式 */
@media (max-width: 768px) {
  .xm-select {
    width: 100% !important;
  }
  
  .xm-select-tag {
    margin-bottom: 5px !important;
  }
}