select2 multiple select changing style of selected values

Question

I am looking to try and format or change the style of the selected items from a select2 selection. That is when you use select2 on multiple selections (dropdown select option field), the options you choose jump into a multiple selection box with a little x on them to remove if you choose.

I am trying to format these chosen selections (see image) so that the page looks neater. Trying to make the font smaller and the background color a different color, struggling...

Can anyone assist in this regard?

Answer 1

You can override the given file css files with respect to the given file https://github.com/select2/select2-bootstrap-theme/blob/master/docs/css/select2-bootstrap.css

Answer 2

here is some useful css selectors with styles for that:

.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;
}