Example page: https://www.jaimedcsilva.com/filter_horizontal/

class Color(models.Model):
    color = models.CharField(max_length=50)
    is_active = models.BooleanField()

    def __str__(self):
        return self.color

...
STATIC_ROOT = BASE_DIR /  'staticfiles'

python manage.py collectstatic
python manage.py makemigrations
python manage.py migrate

from .models import *

admin.site.register(Color)

For models with extense data and high user traffic, consider improving the queries efficiency.

from django.shortcuts import render
from django.views.generic import TemplateView
from .models import *

class index(TemplateView):

    template_name = 'polls/index.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['colors'] = Color.objects.all()

        return context
    

    def post(self, request, *args, **kwargs):

        context = {}

        colors = request.POST.getlist('colors')

        Color.objects.all().update(is_active=False)
        Color.objects.filter(color__in=colors).update(is_active=True)

        context['colors'] = Color.objects.all()
        return render(request, self.template_name, context)

from django.views.i18n import JavaScriptCatalog

urlpatterns = [
    ...
    path('jsi18n/', JavaScriptCatalog.as_view(), name="jsi18n"),

]

These files are automatically available in Django, so we just need to include them directly from the Django admin static files. Nevertheless you need to make sure to run collectstatic.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="/static/admin/css/forms.css">
<link rel="stylesheet" href="/static/admin/css/widgets.css">
<link rel="stylesheet" href="/static/admin/css/base.css">
<link rel="stylesheet" href="/static/admin/css/responsive.css">
    
<script src="/jsi18n/"></script>
<script src="/static/admin/js/core.js"></script>
<script src="/static/admin/js/SelectBox.js"></script>
<script src="/static/admin/js/SelectFilter2.js"></script>

<style>
        .selector-chooser, ::after, ::before{
            box-sizing: content-box;
        }

        .module{
            background-color: transparent!important;
        }

        .selector-filter{
            background-color: white;
        }

</style>


<form method="post" novalidate>
    {% csrf_token %}

    <fieldset class="module">

        <select name="colors" id="id_colors" multiple class="selectfilter" data-field-name="Colors" >

            {% for color in colors %}
                
                <option value="{{color}}" {% if color.is_active %} selected {% endif %}> {{color}} </option>

            {% endfor %}

        </select>
                
    </fieldset>
        
    <div class="help">Hold down “Control”, or “Command” on a Mac, to select more than one.</div> <br>
    <input type="submit" value="Submit" id="submit"> 

</form>

Aditional CSS for different parts of the elements:

<style>
        

    select {
        background-color: transparent;
        border-color: black!important;
        background: linear-gradient(180deg, rgb(61, 58, 33) 0%, rgb(21, 23, 24) 100%);
        overflow-x: hidden!important;
    }

    .selector-filter{
        border-color: black!important;
        background-color: #161f0d;
    }

    .selector-available  option{
        color: #c9c39f!important;
        font-size: 12px;;
    }
    .selector-chosen  option{
        color: #2bff00!important;
        font-size: 12px;;
    }

    .selector-available h2, .selector-chosen h2{
        background: #1d2b0d!important;
        color: rgb(171, 173, 151)!important;
        border-color: black;
    }

    .selector-filter input{
        background-color: rgb(27, 53, 25);
        color:aquamarine;
        border: 1px solid black;
    }

    .selector-filter{
        border-color: black!important;
        background-color: #161f0d;
    }

    select option:checked {
        background-color:rgb(14, 36, 39)!important; 
        color: cyan!important;
    }

    select::-webkit-scrollbar {
        width: 12px; 
    }

    select::-webkit-scrollbar-thumb {
        background-color: #43522b!important; 
        border-radius: 10px; 
    }

    select::-webkit-scrollbar-track {
        background-color: #19362b!important; 
    }

    select:focus {
        outline: none; 
    }

</style>