Haikson

[ Everything is possible. Everything takes time. ]

The Bootstrap style for django-autocomplete-light

Django-Autocomplete-Light solves the big problems that arise when lists (select fields) with a huge number of items exist in a form. But the styles are written rigidly and you can't remake them without crutches. Below is a style, slightly simplified task:
    .select2-container .select2-selection--single {
        height: auto;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-search__field {
        display: block;
        width: 100%;
        height: 43px;
        padding: 10px 18px;
        font-size: 15px;
        line-height: 1.42857143;
        color: #333;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
        -webkit-transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
        -o-transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
        transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 43px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: #333 transparent transparent transparent;
        border-width: 7px 3px 0 3px;
    }
    .select2-selection__clear {
        display: none;
    }
    .select2-container--default .select2-selection--single {
        background-color: transparent;
        border: none;
        border-radius: 0;
    }
    .select2-container--default {
        width: 100%!important;
    }