Стилизация плагина `select2`

#javascript #jquery #css #plugin

Есть такой плагин select2. Хочу стилизовать его примерно так:



Но тут есть проблемы, когда я абсолютным позиционированием вывожу выбранные опции,
то и input выводится наружу. 

Можете подсказать каким путем мне идти, чтобы добиться такого результата как на картинке.



$(document).ready(function(){
  $('.__select2').select2({
        placeholder: 'Select an Industry',
        allowClear: false,
        tags: true,
        maximumSelectionLength: 5
    });
});








  OAO & PHP
  OAO & MySQL
  OAO & Apache
  OAO & Java




    

Ответы

Ответ 1

Не красиво, но задачу выполняет.



$(document).ready(function(){
  $('.__select2').select2({
        placeholder: 'Select an Industry',
        allowClear: false,
        tags: true,
        maximumSelectionLength: 5
    });
});
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    position: absolute;
    top: 100%;
    height: 0;
    overflow: visible !important;
    white-space: nowrap !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    float: none !important;
    display: inline-block;
    position: relative;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: absolute;
    right: -8px;
    top: -14px;
}

.select2-container .select2-search--inline {
    position: absolute;
    top: -100%;
    transform: translateY(-100%); /*тут через calc можно подровнять или через margin*/
    width: 90% !important;
}

.select2-container--default .select2-search--inline .select2-search__field{
    max-width: 100% !important;
}








  OAO & PHP
  OAO & MySQL
  OAO & Apache
  OAO & Java