select2 多项选择更改所选值的样式答案

【问题标题】：select2 multiple select changing style of selected valuesselect2 多项选择更改所选值的样式
【发布时间】：2017-08-12 23:32:20
【问题描述】：

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

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

任何人都可以在这方面提供帮助吗？

【问题讨论】：

标签： jquery jquery-select2

【解决方案1】：

您可以相对于给定文件https://github.com/select2/select2-bootstrap-theme/blob/master/docs/css/select2-bootstrap.css覆盖给定文件css文件

【讨论】：

你是对的，这需要通过覆盖css来完成，例如使用：.select2-container--default .select2-selection--multiple .select2-selection__choice{color:red;}
谢谢你，帮我解决了:)

【解决方案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;
}

【讨论】：