├── README.md ├── LICENSE ├── select2-materialize.js └── select2-materialize.css /README.md: -------------------------------------------------------------------------------- 1 | # materialize-select2 2 | Simple jquery plugin that implements select2 in materializecss framework. 3 | ## [Example](https://jsfiddle.net/nikitasnv/6v12po6z/) 4 | ### plugin uses css from this [repository](https://github.com/kevzlou7979/select2-materialize) 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 nikitasnv 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /select2-materialize.js: -------------------------------------------------------------------------------- 1 | (function (document, $, undefined) { 2 | $.fn.sm_select = function (options) { 3 | var defaults = $.extend({ 4 | input_text: 'Select option...', 5 | duration: 200, 6 | show_placeholder: false 7 | }, options); 8 | return this.each(function (e) { 9 | $(this).select2(options); 10 | var select_state; 11 | var drop_down; 12 | var obj = $(this); 13 | $(this).on('select2:open', function (e) { 14 | drop_down = $('body>.select2-container .select2-dropdown'); 15 | drop_down.find('.select2-search__field').attr('placeholder', (($(this).attr('placeholder') != undefined) ? 16 | $(this).attr('placeholder') : defaults.input_text)); 17 | drop_down.hide(); 18 | setTimeout(function () { 19 | if (defaults.show_placeholder == false) { 20 | var out_p = obj.find('option[placeholder]'); 21 | out_p.each(function () { 22 | drop_down.find('li:contains("' + $(this).text() + '")').css('display', 'none'); 23 | }); 24 | } 25 | drop_down.css('opacity', 0).stop(true, true).slideDown(defaults.duration, 'easeOutCubic', function () { 26 | drop_down.find('.select2-search__field').focus(); 27 | }).animate( 28 | {opacity: 1}, 29 | {queue: false, duration: defaults.duration} 30 | ) 31 | }, 10); 32 | select_state = true; 33 | }); 34 | $(this).on('select2:closing', function (e) { 35 | if (select_state) { 36 | e.preventDefault(); 37 | drop_down = $('body>.select2-container .select2-dropdown'); 38 | drop_down.slideUp(defaults.duration, 'easeOutCubic', function () { 39 | obj.select2('close'); 40 | }).animate( 41 | {opacity: 0}, 42 | {queue: false, duration: defaults.duration, easing: 'easeOutSine'} 43 | ); 44 | select_state = false; 45 | } 46 | }); 47 | }); 48 | }; 49 | })(document, jQuery); -------------------------------------------------------------------------------- /select2-materialize.css: -------------------------------------------------------------------------------- 1 | .select2-container { 2 | box-sizing: border-box; 3 | display: inline-block; 4 | margin: 0 0 20px 0; 5 | border-bottom: 1px solid #9e9e9e;; 6 | position: relative; 7 | vertical-align: middle; 8 | } 9 | .select2 { 10 | width: 100% !important; 11 | } 12 | 13 | .select2-container .select2-selection--single { 14 | box-sizing: border-box; 15 | cursor: pointer; 16 | display: block; 17 | height: 28px; 18 | user-select: none; 19 | -webkit-user-select: none; 20 | } 21 | 22 | .select2-container .select2-selection--single .select2-selection__rendered { 23 | display: block; 24 | padding-left: 0; 25 | padding-right: 20px; 26 | overflow: hidden; 27 | text-overflow: ellipsis; 28 | white-space: nowrap 29 | } 30 | 31 | .select2-container .select2-selection--single .select2-selection__clear { 32 | position: relative 33 | } 34 | 35 | .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered { 36 | padding-right: 8px; 37 | padding-left: 20px 38 | } 39 | 40 | .select2-container .select2-selection--multiple { 41 | box-sizing: border-box; 42 | cursor: pointer; 43 | display: block; 44 | min-height: 32px; 45 | user-select: none; 46 | -webkit-user-select: none 47 | } 48 | 49 | .select2-container .select2-selection--multiple .select2-selection__rendered { 50 | display: inline-block; 51 | overflow: hidden; 52 | padding-left: 8px; 53 | text-overflow: ellipsis; 54 | white-space: nowrap 55 | } 56 | 57 | .select2-container .select2-search--inline { 58 | float: left 59 | } 60 | 61 | .select2-container .select2-search--inline .select2-search__field { 62 | box-sizing: border-box; 63 | border: none; 64 | font-size: 100%; 65 | margin-top: 5px; 66 | padding: 0 67 | } 68 | 69 | .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button { 70 | -webkit-appearance: none 71 | } 72 | 73 | .select2-dropdown { 74 | background-color: white; 75 | border: 1px solid #aaa; 76 | border-radius: 2px; 77 | box-sizing: border-box; 78 | display: block; 79 | position: absolute; 80 | left: -100000px; 81 | width: 100%; 82 | z-index: 1051 83 | } 84 | 85 | .select2-results { 86 | display: block 87 | } 88 | 89 | .select2-results__options { 90 | list-style: none; 91 | margin: 0; 92 | padding: 0 93 | } 94 | 95 | .select2-results__option { 96 | padding: 6px; 97 | user-select: none; 98 | -webkit-user-select: none 99 | } 100 | 101 | .select2-results__option[aria-selected] { 102 | cursor: pointer 103 | } 104 | 105 | .select2-container--open .select2-dropdown { 106 | left: 0 107 | } 108 | 109 | .select2-container--open .select2-dropdown--above { 110 | border-bottom: none; 111 | border-bottom-left-radius: 0; 112 | border-bottom-right-radius: 0 113 | } 114 | 115 | .select2-container--open .select2-dropdown--below { 116 | border-top: none; 117 | border-top-left-radius: 0; 118 | border-top-right-radius: 0 119 | } 120 | 121 | .select2-search--dropdown { 122 | display: block; 123 | padding: 4px 124 | } 125 | 126 | .select2-search--dropdown .select2-search__field { 127 | padding: 4px; 128 | width: 100%; 129 | box-sizing: border-box 130 | } 131 | 132 | .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button { 133 | -webkit-appearance: none 134 | } 135 | 136 | .select2-search--dropdown.select2-search--hide { 137 | display: none 138 | } 139 | 140 | .select2-close-mask { 141 | border: 0; 142 | margin: 0; 143 | padding: 0; 144 | display: block; 145 | position: fixed; 146 | left: 0; 147 | top: 0; 148 | min-height: 100%; 149 | min-width: 100%; 150 | height: auto; 151 | width: auto; 152 | opacity: 0; 153 | z-index: 99; 154 | background-color: #fff; 155 | filter: alpha(opacity=0) 156 | } 157 | 158 | .select2-hidden-accessible { 159 | border: 0 !important; 160 | clip: rect(0 0 0 0) !important; 161 | height: 1px !important; 162 | margin: -1px !important; 163 | overflow: hidden !important; 164 | padding: 0 !important; 165 | position: absolute !important; 166 | width: 1px !important 167 | } 168 | 169 | .select2-container--default .select2-selection--single { 170 | 171 | border: none !important; 172 | border-radius: 2px !important; 173 | } 174 | 175 | .select2-results__options li{ 176 | color: #26a69a !important; 177 | font-size: larger; 178 | } 179 | 180 | .select2-container--default .select2-selection--single .select2-selection__rendered { 181 | color: #444; 182 | line-height: 28px 183 | } 184 | 185 | .select2-container--default .select2-selection--single .select2-selection__clear { 186 | cursor: pointer; 187 | float: right; 188 | font-weight: bold 189 | } 190 | 191 | .select2-container--default .select2-selection--single .select2-selection__placeholder { 192 | color: #999 193 | } 194 | 195 | .select2-container--default .select2-selection--single .select2-selection__arrow { 196 | height: 26px; 197 | position: absolute; 198 | top: 1px; 199 | right: 1px; 200 | width: 20px; 201 | 202 | } 203 | 204 | .select2-container--default .select2-selection--single .select2-selection__arrow b { 205 | border-color: #888 transparent transparent transparent; 206 | border-style: solid; 207 | border-width: 5px 4px 0 4px; 208 | height: 0; 209 | left: 50%; 210 | margin-left: -4px; 211 | margin-top: -2px; 212 | position: absolute; 213 | top: 50%; 214 | width: 0 215 | } 216 | 217 | .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear { 218 | float: left 219 | } 220 | 221 | .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow { 222 | left: 1px; 223 | right: auto 224 | } 225 | 226 | .select2-container--default.select2-container--disabled .select2-selection--single { 227 | background-color: #eee; 228 | cursor: default 229 | } 230 | 231 | .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear { 232 | display: none 233 | } 234 | 235 | .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { 236 | border-color: transparent transparent #000 transparent; 237 | border-width: 0 4px 5px 4px 238 | } 239 | 240 | .select2-container--default .select2-selection--multiple { 241 | background-color: white; 242 | border: 1px solid #aaa; 243 | border-radius: 4px; 244 | cursor: text 245 | } 246 | 247 | .select2-container--default .select2-selection--multiple .select2-selection__rendered { 248 | box-sizing: border-box; 249 | list-style: none; 250 | margin: 0; 251 | padding: 0 5px; 252 | width: 100% 253 | } 254 | 255 | .select2-container--default .select2-selection--multiple .select2-selection__placeholder { 256 | color: #999; 257 | margin-top: 5px; 258 | float: left 259 | } 260 | 261 | .select2-container--default .select2-selection--multiple .select2-selection__clear { 262 | cursor: pointer; 263 | float: right; 264 | font-weight: bold; 265 | margin-top: 5px; 266 | margin-right: 10px 267 | } 268 | 269 | .select2-container--default .select2-selection--multiple .select2-selection__choice { 270 | background-color: #e4e4e4; 271 | border: 1px solid #aaa; 272 | border-radius: 4px; 273 | cursor: default; 274 | float: left; 275 | margin-right: 5px; 276 | margin-top: 5px; 277 | padding: 0 5px 278 | } 279 | 280 | .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { 281 | color: #999; 282 | cursor: pointer; 283 | display: inline-block; 284 | font-weight: bold; 285 | margin-right: 2px 286 | } 287 | 288 | .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { 289 | color: #333 290 | } 291 | 292 | .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline { 293 | float: right 294 | } 295 | 296 | .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice { 297 | margin-left: 5px; 298 | margin-right: auto 299 | } 300 | 301 | .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { 302 | margin-left: 2px; 303 | margin-right: auto 304 | } 305 | 306 | .select2-container--default.select2-container--focus .select2-selection--multiple { 307 | border: solid #000 1px; 308 | outline: 0 309 | } 310 | 311 | .select2-container--default.select2-container--disabled .select2-selection--multiple { 312 | background-color: #eee; 313 | cursor: default 314 | } 315 | 316 | .select2-container--default.select2-container--disabled .select2-selection__choice__remove { 317 | display: none 318 | } 319 | 320 | .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple { 321 | border-top-left-radius: 0; 322 | border-top-right-radius: 0 323 | } 324 | 325 | .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { 326 | border-bottom-left-radius: 0; 327 | border-bottom-right-radius: 0 328 | } 329 | 330 | .select2-container--default .select2-search--dropdown .select2-search__field { 331 | border: 1px solid #aaa 332 | } 333 | 334 | .select2-container--default .select2-search--inline .select2-search__field { 335 | background: transparent; 336 | border: none; 337 | outline: 0; 338 | box-shadow: none; 339 | -webkit-appearance: textfield 340 | } 341 | 342 | .select2-container--default .select2-results > .select2-results__options { 343 | max-height: 250px; 344 | overflow-y: auto; 345 | } 346 | 347 | .select2-container--default .select2-results__option[role=group] { 348 | padding: 0 349 | } 350 | 351 | .select2-container--default .select2-results__option[aria-disabled=true] { 352 | color: #999 !important; 353 | } 354 | 355 | .select2-container--default .select2-results__option[aria-selected=true] { 356 | background-color: #ddd 357 | } 358 | 359 | .select2-container--default .select2-results__option .select2-results__option { 360 | padding-left: 1em 361 | } 362 | 363 | .select2-container--default .select2-results__option .select2-results__option .select2-results__group { 364 | padding-left: 0 365 | } 366 | 367 | .select2-container--default .select2-results__option .select2-results__option .select2-results__option { 368 | margin-left: -1em; 369 | padding-left: 2em 370 | } 371 | 372 | .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option { 373 | margin-left: -2em; 374 | padding-left: 3em 375 | } 376 | 377 | .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { 378 | margin-left: -3em; 379 | padding-left: 4em 380 | } 381 | 382 | .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { 383 | margin-left: -4em; 384 | padding-left: 5em 385 | } 386 | 387 | .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { 388 | margin-left: -5em; 389 | padding-left: 6em 390 | } 391 | 392 | .select2-container--default .select2-results__option--highlighted[aria-selected] { 393 | background-color: #5897fb; 394 | color: white 395 | } 396 | 397 | .select2-container--default .select2-results__group { 398 | cursor: default; 399 | display: block; 400 | padding: 6px 401 | } 402 | 403 | .select2-container--classic .select2-selection--single { 404 | background-color: #f7f7f7; 405 | border: 1px solid #aaa; 406 | border-radius: 4px; 407 | outline: 0; 408 | background-image: -webkit-linear-gradient(top, #fff 50%, #eee 100%); 409 | background-image: -o-linear-gradient(top, #fff 50%, #eee 100%); 410 | background-image: linear-gradient(to bottom, #fff 50%, #eee 100%); 411 | background-repeat: repeat-x; 412 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0) 413 | } 414 | 415 | .select2-container--classic .select2-selection--single:focus { 416 | border: 1px solid #5897fb 417 | } 418 | 419 | .select2-container--classic .select2-selection--single .select2-selection__rendered { 420 | color: #444; 421 | line-height: 28px 422 | } 423 | 424 | .select2-container--classic .select2-selection--single .select2-selection__clear { 425 | cursor: pointer; 426 | float: right; 427 | font-weight: bold; 428 | margin-right: 10px 429 | } 430 | 431 | .select2-container--classic .select2-selection--single .select2-selection__placeholder { 432 | color: #999 433 | } 434 | 435 | .select2-container--classic .select2-selection--single .select2-selection__arrow { 436 | background-color: #ddd; 437 | border: none; 438 | border-left: 1px solid #aaa; 439 | border-top-right-radius: 4px; 440 | border-bottom-right-radius: 4px; 441 | height: 26px; 442 | position: absolute; 443 | top: 1px; 444 | right: 1px; 445 | width: 20px; 446 | background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%); 447 | background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%); 448 | background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%); 449 | background-repeat: repeat-x; 450 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0) 451 | } 452 | 453 | .select2-container--classic .select2-selection--single .select2-selection__arrow b { 454 | border-color: #888 transparent transparent transparent; 455 | border-style: solid; 456 | border-width: 5px 4px 0 4px; 457 | height: 0; 458 | left: 50%; 459 | margin-left: -4px; 460 | margin-top: -2px; 461 | position: absolute; 462 | top: 50%; 463 | width: 0 464 | } 465 | 466 | .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear { 467 | float: left 468 | } 469 | 470 | .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow { 471 | border: none; 472 | border-right: 1px solid #aaa; 473 | border-radius: 0; 474 | border-top-left-radius: 4px; 475 | border-bottom-left-radius: 4px; 476 | left: 1px; 477 | right: auto 478 | } 479 | 480 | .select2-container--classic.select2-container--open .select2-selection--single { 481 | border: 1px solid #5897fb 482 | } 483 | 484 | .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow { 485 | background: transparent; 486 | border: none 487 | } 488 | 489 | .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b { 490 | border-color: transparent transparent #888 transparent; 491 | border-width: 0 4px 5px 4px 492 | } 493 | 494 | .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single { 495 | border-top: none; 496 | border-top-left-radius: 0; 497 | border-top-right-radius: 0; 498 | background-image: -webkit-linear-gradient(top, #fff 0%, #eee 50%); 499 | background-image: -o-linear-gradient(top, #fff 0%, #eee 50%); 500 | background-image: linear-gradient(to bottom, #fff 0%, #eee 50%); 501 | background-repeat: repeat-x; 502 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0) 503 | } 504 | 505 | .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single { 506 | border-bottom: none; 507 | border-bottom-left-radius: 0; 508 | border-bottom-right-radius: 0; 509 | background-image: -webkit-linear-gradient(top, #eee 50%, #fff 100%); 510 | background-image: -o-linear-gradient(top, #eee 50%, #fff 100%); 511 | background-image: linear-gradient(to bottom, #eee 50%, #fff 100%); 512 | background-repeat: repeat-x; 513 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0) 514 | } 515 | 516 | .select2-container--classic .select2-selection--multiple { 517 | background-color: white; 518 | border: 1px solid #aaa; 519 | border-radius: 4px; 520 | cursor: text; 521 | outline: 0 522 | } 523 | 524 | .select2-container--classic .select2-selection--multiple:focus { 525 | border: 1px solid #5897fb 526 | } 527 | 528 | .select2-container--classic .select2-selection--multiple .select2-selection__rendered { 529 | list-style: none; 530 | margin: 0; 531 | padding: 0 5px 532 | } 533 | 534 | .select2-container--classic .select2-selection--multiple .select2-selection__clear { 535 | display: none 536 | } 537 | 538 | .select2-container--classic .select2-selection--multiple .select2-selection__choice { 539 | background-color: #e4e4e4; 540 | border: 1px solid #aaa; 541 | border-radius: 4px; 542 | cursor: default; 543 | float: left; 544 | margin-right: 5px; 545 | margin-top: 5px; 546 | padding: 0 5px 547 | } 548 | 549 | .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove { 550 | color: #888; 551 | cursor: pointer; 552 | display: inline-block; 553 | font-weight: bold; 554 | margin-right: 2px 555 | } 556 | 557 | .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { 558 | color: #555 559 | } 560 | 561 | .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { 562 | float: right 563 | } 564 | 565 | .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { 566 | margin-left: 5px; 567 | margin-right: auto 568 | } 569 | 570 | .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { 571 | margin-left: 2px; 572 | margin-right: auto 573 | } 574 | 575 | .select2-container--classic.select2-container--open .select2-selection--multiple { 576 | border: 1px solid #5897fb 577 | } 578 | 579 | .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple { 580 | border-top: none; 581 | border-top-left-radius: 0; 582 | border-top-right-radius: 0 583 | } 584 | 585 | .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple { 586 | border-bottom: none; 587 | border-bottom-left-radius: 0; 588 | border-bottom-right-radius: 0 589 | } 590 | 591 | .select2-container--classic .select2-search--dropdown .select2-search__field { 592 | border: 1px solid #aaa; 593 | outline: 0 594 | } 595 | 596 | .select2-container--classic .select2-search--inline .select2-search__field { 597 | outline: 0; 598 | box-shadow: none 599 | } 600 | 601 | .select2-container--classic .select2-dropdown { 602 | background-color: #fff; 603 | border: 1px solid transparent 604 | } 605 | 606 | .select2-container--classic .select2-dropdown--above { 607 | border-bottom: none 608 | } 609 | 610 | .select2-container--classic .select2-dropdown--below { 611 | border-top: none 612 | } 613 | 614 | .select2-container--classic .select2-results > .select2-results__options { 615 | max-height: 200px; 616 | overflow-y: auto 617 | } 618 | 619 | .select2-container--classic .select2-results__option[role=group] { 620 | padding: 0 621 | } 622 | 623 | .select2-container--classic .select2-results__option[aria-disabled=true] { 624 | color: grey 625 | } 626 | 627 | .select2-container--classic .select2-results__option--highlighted[aria-selected] { 628 | background-color: #3875d7; 629 | color: #fff 630 | } 631 | 632 | .select2-container--classic .select2-results__group { 633 | cursor: default; 634 | display: block; 635 | padding: 6px 636 | } 637 | 638 | .select2-container--classic.select2-container--open .select2-dropdown { 639 | border-color: #5897fb 640 | } 641 | 642 | 643 | 644 | 645 | .select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple { 646 | height: 40px; 647 | border: none; 648 | border-bottom: 1px solid #9e9e9e; 649 | border-radius: 0; 650 | outline: 0 651 | } 652 | 653 | .select2-container--default .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--multiple { 654 | height: auto 655 | } 656 | 657 | .select2-container--default .select2-search--inline .select2-search__field { 658 | height: 30px 659 | } 660 | 661 | .select2-container--default .select2-selection--multiple input { 662 | margin: 0 663 | } 664 | 665 | .select2-container--default .select2-selection--multiple .select2-selection__choice { 666 | border: none; 667 | color: #fff; 668 | margin-top: 8px; 669 | padding: 3px 10px; 670 | background-color: #42A5F5 671 | } 672 | 673 | .select2-container--default .select2-selection--multiple .select2-selection__choice__remove, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { 674 | color: #fff; 675 | margin-right: 5px 676 | } 677 | 678 | .select2-container--default .select2-selection--single .select2-selection__rendered { 679 | line-height: 40px; 680 | padding-left: 0 681 | } 682 | 683 | .select2-container--default .select2-selection--single .select2-selection__arrow { 684 | height: 40px 685 | } 686 | 687 | .select2-container--default .select2-selection--single .select2-selection__arrow b { 688 | border-color: rgba(0, 0, 0, 1) transparent transparent 689 | } 690 | 691 | .select2-container--open .select2-dropdown--above, .select2-container--open .select2-dropdown--below { 692 | border: none; 693 | box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2) 694 | } 695 | 696 | .select2-results__option { 697 | padding: 1rem 698 | } 699 | 700 | .select2-container--default .select2-search--dropdown .select2-search__field { 701 | border-top: none; 702 | border-right: none; 703 | border-left: none 704 | } 705 | 706 | .select2-container--default .select2-results__option--highlighted[aria-selected], div.tagsinput span.tag { 707 | background-color: #eeeeee 708 | } 709 | 710 | --------------------------------------------------------------------------------