<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class=" col-md-4 offset-md-4"> <select class="js-example-matcher-start form-control select2 js-select2" multiple="multiple"> <option value="O1" data-badge=""> O ption1</option> <option value="O2" data-badge=""> O ption2</option> <option value="O3" data-badge=""> O ption3</option> <option value="O4" data-badge=""> O ption4</option> <option value="O5" data-badge=""> O ption5</option> <option value="O6" data-badge=""> O ption6</option> <option value="O7" data-badge=""> O ption7</option> <option value="O8" data-badge=""> O ption8</option> <option value="O9" data-badge=""> O ption9</option> <option value="O10" data-badge=""> O ption10</option> <option value="O11" data-badge=""> O ption11</option> <option value="O12" data-badge=""> O ption12</option> <option value="O13" data-badge=""> O ption13</option> </select> </div> <script> $(".js-select2").select2({ closeOnSelect : false, placeholder : "Placeholder", allowHtml: true, allowClear: true, tags: true // создает новые опции на лету }); </script>

body { font-family: 'Ubuntu', sans-serif; font-weight: bold; } .select2-container { min-width: 400px; } .select2-results__option { padding-right: 20px; vertical-align: middle; } .select2-results__option:before { content: ""; display: inline-block; position: relative; height: 20px; width: 20px; border: 2px solid #e9e9e9; border-radius: 4px; background-color: #fff; margin-right: 20px; vertical-align: middle; } .select2-results__option[aria-selected=true]:before { font-family:fontAwesome; content: "\f00c"; color: #fff; background-color: #f77750; border: 0; display: inline-block; padding-left: 3px; } .select2-container--default .select2-results__option[aria-selected=true] { background-color: #fff; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #eaeaeb; color: #272727; } .select2-container--default .select2-selection--multiple { margin-bottom: 10px; } .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-radius: 4px; } .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: #f77750; border-width: 2px; } .select2-container--default .select2-selection--multiple { border-width: 2px; } .select2-container--open .select2-dropdown--below { border-radius: 6px; box-shadow: 0 0 10px rgba(0,0,0,0.5); } .select2-selection .select2-selection--multiple:after { content: 'hhghgh'; }