select2多选所选值的更改样式

Question

我希望尝试从select2选项中格式化或更改所选项目的样式。也就是说，当您在多个选项（下拉选择选项字段）上使用select2时，您选择的选项会跳转到多选框，如果您选择，则会删除一个小x。

我正在尝试格式化这些选择的选项（请参阅图像），以使页面看起来更整洁。试图让字体变小，背景颜色变成不同颜色，苦苦挣扎......

有人可以在这方面提供帮助吗？

Answer 1

您可以根据给定文件https://github.com/select2/select2-bootstrap-theme/blob/master/docs/css/select2-bootstrap.css

覆盖给定的文件css文件

Answer 2

以下是一些有用的具有样式的css选择器：

.select2-selection__choice{
    margin-top: 0px!important;
    padding-right: 5px!important;
    padding-left: 5px!important;
    background-color: transparent!important;
    border:none!important;
    border-radius: 4px!important;
    background-color: rgba(0, 139, 139, 0.09) !important;
}

.select2-selection__choice__remove{
    border: none!important;
    border-radius: 0!important;
    padding: 0 2px!important;
}

.select2-selection__choice__remove:hover{
    background-color: transparent!important;
    color: #ef5454 !important;
}