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

126
06 сентября 2019, 20:20

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

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

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

$(document).ready(function(){ 
  $('.__select2').select2({ 
        placeholder: 'Select an Industry', 
        allowClear: false, 
        tags: true, 
        maximumSelectionLength: 5 
    }); 
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script> 
<select class="__select2" multiple="multiple"> 
  <option>OAO & PHP</option> 
  <option>OAO & MySQL</option> 
  <option>OAO & Apache</option> 
  <option>OAO & Java</option> 
</select>

Answer 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; 
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script> 
<select class="__select2" multiple="multiple"> 
  <option>OAO & PHP</option> 
  <option>OAO & MySQL</option> 
  <option>OAO & Apache</option> 
  <option>OAO & Java</option> 
</select>

READ ALSO
Интерация чисел, пока не станет 1

Интерация чисел, пока не станет 1

Нужно написать функцию JavaScript,которая возьмет число,и сложит квадрат каждой его цифры, пока не станет 1, если конечно с этим числом это возможноНапример:

117
Как добавить в lazy load background?

Как добавить в lazy load background?

Стоит плагин на wp lazy-load, но не работают изображения через стили background

137
Подгон размеров div блоков под экран

Подгон размеров div блоков под экран

Всем привет! Как реализовать изменение размеров блока при изменении размеров экрана? На сайте http://agario это реализовано так, что блок не может...

110
Один файл js не видит действия другого [закрыт]

Один файл js не видит действия другого [закрыт]

Есть два файла *js , в первом создание дива

141