最近一个项目在用 tabler,tabler 是一款开源免费的并且看起来蛮正经的 UI 库,适用于以后端为主的 web 开发者。

最新版 tabler-v1.0.0-beta20 表单里的选择组件默认使用的是 tom-select,之前用的是 Selectize,但由于该项目停止开发,后来才换了 tom-select。

以上信息来源是官方的 issue

由于官方没有提供对 select2 的支持,所以 select2 的样式在 tabler 里用不了,并且即使是引入了 bootstrap5 的样式,仍然不 work。

于是我就写了一段 css,解决了 select2 在 tabler 下适配的问题。

创建 select2-tabler-theme.css 文件:

.select2-container--default {
    height: 40px;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #d8dde6;
    border-radius: 5px;
    height: 40px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
    padding-left: 12px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
    right: 8px;
}

.select2-container--default .select2-selection--multiple {
    background-color: #fff;
    border: 1px solid #d8dde6;
    border-radius: 5px;
    min-height: 40px; /* 根据需要调整高度 */
    padding: 0 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #f0f1f4;
    border: 1px solid #d8dde6;
    border-radius: 5px;
    /*padding: 2px 8px;*/
    margin-top: 5px;
    line-height: 1.6; /* 调整行高以改善布局 */
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 5px;
    color: #666;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: 9px;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
    color: #919bae;
}

在页面中引入:

<link rel="stylesheet" href="/path/to/select2-tabler-theme.css">

无需其他设置,就可以让 select2 组件看起来不违和了。

如果不work,请删除掉 select2 配置中的 theme: "xxx" 这一行。

最终效果

单选

2024-09-07T19:26:07.png

2024-09-07T19:25:42.png

多选

2024-09-09T05:20:15.png

2024-09-09T05:20:58.png

跟其他 form 组件看起来没啥区别,点开来 input 输入框 差点意思,不过已经满足我的需求了。

标签: css, select2, tabler