Search Results for '.searchandfilter custom css'

[Trevor]

The gaps thing. My basic script would look something like this:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    var $container = $('.reinit-isotope'), iso_selector = $('.reinit-isotope').data('iso-selector');
    $container.isotopeb({masonry: {columnWidth: iso_selector}, transitionDuration: '0s'});
  });
}(jQuery));

It would have to be inside script tags or in the Simple Custom CSs and javascript plugin (which does the script tags for you).

[Trevor]

I had to add some custom javascript (using a plugin) to reveal the products after ajax refresh:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    $('.grid_item').css({"opacity" : "1"});
  });
}(jQuery));

Does it now work? BTW, I added counts and hid those terms with 0 count (otherwise you risk getting a no results found).

[Trevor]

Can you try adding this custom css to your theme:

#search-filter-form-30786.searchandfilter > ul {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

[Trevor]

OK. I added a plugin called Simple Custom CSS and JS

I made the CSS to this:

body.sfajax .elementor-336 .elementor-element.elementor-element-e34e354 .elementor-posts-container .elementor-post__thumbnail {
  padding-bottom: 0 !important;
}

And then I added some JS to add the sfajax class to the body once a search had been started:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxstart", ".searchandfilter", function(){
    jQuery("body").addClass("sfajax");
  });
}(jQuery));

[Trevor]

If we did not use that CSS I gave you, this ONLY happens after an Ajax refresh of the results?

If so, some custom javascript could be used to apply the CSS, in theory like this:

<script type="text/javascript">(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");

    $('.elementor-336 .elementor-element.elementor-element-e34e354 .elementor-posts-container .elementor-post__thumbnail').css('padding-bottom','0 none !important');

  });
}(jQuery));</script>

I am not sure if, when doing it this way, it needs the !important. If you have no means to add javascript to a page, the simplest is a text widget and paste it in there.

[Trevor]

It isn’t possible to use a different slider script. This the one that we use:

https://jqueryui.com/slider/

You would need to apply custom CSS to override the default appearance of our slider. This is the default CSS that we use:

.noUi-target, .noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.noUi-target {
  position: relative;
  direction: ltr; }

.noUi-base, .noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1; }

.noUi-connects {
  overflow: hidden;
  z-index: 0; }

.noUi-connect, .noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0; }

html:not([dir=rtl]) .noUi-horizontal .noUi-origin {
  left: auto;
  right: 0; }

.noUi-vertical .noUi-origin {
  width: 0; }

.noUi-horizontal .noUi-origin {
  height: 0; }

.noUi-handle {
  position: absolute; }

.noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin {
  -webkit-transition: transform .3s;
  transition: transform .3s; }

.noUi-state-drag * {
  cursor: inherit !important; }

.noUi-horizontal {
  height: 18px; }

.noUi-horizontal .noUi-handle {
  width: 34px;
  height: 28px;
  left: -17px;
  top: -6px; }

.noUi-vertical {
  width: 18px; }

.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  left: -6px;
  top: -17px; }

html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
  right: -17px;
  left: auto; }

.noUi-target {
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid #D3D3D3;
  box-shadow: inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB; }

.noUi-connects {
  border-radius: 3px; }

.noUi-connect {
  background: #3FB8AF; }

.noUi-draggable {
  cursor: ew-resize; }

.noUi-vertical .noUi-draggable {
  cursor: ns-resize; }

.noUi-handle {
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #FFF;
  cursor: default;
  box-shadow: inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB; }

.noUi-active {
  box-shadow: inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB; }

.noUi-handle:after, .noUi-handle:before {
  content: "";
  display: block;
  position: absolute;
  height: 14px;
  width: 1px;
  background: #E8E7E6;
  left: 14px;
  top: 6px; }

.noUi-handle:after {
  left: 17px; }

.noUi-vertical .noUi-handle:after, .noUi-vertical .noUi-handle:before {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px; }

.noUi-vertical .noUi-handle:after {
  top: 17px; }

[disabled] .noUi-connect {
  background: #B8B8B8; }

[disabled] .noUi-handle, [disabled].noUi-handle, [disabled].noUi-target {
  cursor: not-allowed; }

.noUi-pips, .noUi-pips * {
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.noUi-pips {
  position: absolute;
  color: #999; }

.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center; }

.noUi-value-sub {
  color: #ccc;
  font-size: 10px; }

.noUi-marker {
  position: absolute;
  background: #CCC; }

.noUi-marker-large, .noUi-marker-sub {
  background: #AAA; }

.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%; }

.noUi-value-horizontal {
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%); }

.noUi-rtl .noUi-value-horizontal {
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%); }

.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px; }

.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px; }

.noUi-marker-horizontal.noUi-marker-large {
  height: 15px; }

.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%; }

.noUi-value-vertical {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%, 0);
  padding-left: 25px; }

.noUi-rtl .noUi-value-vertical {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%); }

.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px; }

.noUi-marker-vertical.noUi-marker-sub {
  width: 10px; }

.noUi-marker-vertical.noUi-marker-large {
  width: 15px; }

.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: center;
  white-space: nowrap; }

.noUi-horizontal .noUi-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%; }

.noUi-vertical .noUi-tooltip {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 120%; }

You can copy/use/modify parts of the above in your own custom CSS file/code block and precede with .searchandfilter to override. e.g.

.searchandfilter .noUi-tooltip {
  color: #fff;
}

[Trevor]

You don’t have to use all of this custom CSS, but this will give you a flavor:

.searchandfilter h4 {
  font-size: 22px !important;
  background: white;
  border-top-left-radius: 10px;
  width: 300px;
  color: #fff !important;
  font-weight: 700 !important;
  margin: 10px 0px 0px 0px;
  padding: 5px 5px 5px;
  font-size: 16px;
  text-shadow: 1px 1px 2px #444444, 0px 0px 1px #fff;
}

[Trevor]

1. A slider has to be based on a custom field with numbers in (which a 4 digit year would be). Taxonomies are always treated as strings, hence they can’t be used for sliders.

2. Replace instances of .searchandfilter with #search-filter-form-14574 to make the CSS form-specific.

3. Only by writing and using some custom CSS. I don’t have a snippet I can show you. You might need a third party coder to help you with that.

4. We have an integration plugin for that plugin.

[Trevor]

I can see what the issue is. Something (a plugin or your theme) is placing custom classes on the columns for each posts and making CSS to set the width of them. When the posts are refreshed using our Ajax, the CSS is not being made. That means the CSS is being made using javascript, and that javascript is from wither your theme or the plugin, and needs to be re-triggered after our Ajax has run. We have a sample script for this, but I do not know what needs to be run. That would come from whoever wrote the code that makes that CSS. The necessary script would look like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");

// call your function(s) here

  });
}(jQuery));</script>

[Trevor]

OK, before we move forward on this, can you go to WP Admin -> Search & Filter -> Settings -> JavaScript & CSS -> Combobox Script and change this to Select2.

Let me know when done. FYI this is the complete Select2 stylesheet:

.select2-container {
 box-sizing:border-box;
 display:inline-block;
 margin:0;
 position:relative;
 vertical-align:middle
}
.select2-container .select2-selection--single {
 box-sizing:border-box;
 cursor:pointer;
 display:block;
 height:28px;
 user-select:none;
 -webkit-user-select:none
}
.select2-container .select2-selection--single .select2-selection__rendered {
 display:block;
 padding-left:8px;
 padding-right:20px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap
}
.select2-container .select2-selection--single .select2-selection__clear {
 position:relative
}
.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered {
 padding-right:8px;
 padding-left:20px
}
.select2-container .select2-selection--multiple {
 box-sizing:border-box;
 cursor:pointer;
 display:block;
 min-height:32px;
 user-select:none;
 -webkit-user-select:none
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
 display:inline-block;
 overflow:hidden;
 padding-left:8px;
 text-overflow:ellipsis;
 white-space:nowrap
}
.select2-container .select2-search--inline {
 float:left
}
.select2-container .select2-search--inline .select2-search__field {
 box-sizing:border-box;
 border:none;
 font-size:100%;
 margin-top:5px;
 padding:0
}
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
 -webkit-appearance:none
}
.select2-dropdown {
 background-color:#fff;
 border:1px solid #aaa;
 border-radius:4px;
 box-sizing:border-box;
 display:block;
 position:absolute;
 left:-100000px;
 width:100%;
 z-index:1051
}
.select2-results {
 display:block
}
.select2-results__options {
 list-style:none;
 margin:0;
 padding:0
}
.select2-results__option {
 padding:6px;
 user-select:none;
 -webkit-user-select:none
}
.select2-results__option[aria-selected] {
 cursor:pointer
}
.select2-container--open .select2-dropdown {
 left:0
}
.select2-container--open .select2-dropdown--above {
 border-bottom:none;
 border-bottom-left-radius:0;
 border-bottom-right-radius:0
}
.select2-container--open .select2-dropdown--below {
 border-top:none;
 border-top-left-radius:0;
 border-top-right-radius:0
}
.select2-search--dropdown {
 display:block;
 padding:4px
}
.select2-search--dropdown .select2-search__field {
 padding:4px;
 width:100%;
 box-sizing:border-box
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
 -webkit-appearance:none
}
.select2-search--dropdown.select2-search--hide {
 display:none
}
.select2-close-mask {
 border:0;
 margin:0;
 padding:0;
 display:block;
 position:fixed;
 left:0;
 top:0;
 min-height:100%;
 min-width:100%;
 height:auto;
 width:auto;
 opacity:0;
 z-index:99;
 background-color:#fff;
 filter:alpha(opacity=0)
}
.select2-hidden-accessible {
 border:0!important;
 clip:rect(0 0 0 0)!important;
 height:1px!important;
 margin:-1px!important;
 overflow:hidden!important;
 padding:0!important;
 position:absolute!important;
 width:1px!important
}
.select2-container--classic .select2-results>.select2-results__options,.select2-container--default .select2-results>.select2-results__options {
 max-height:200px;
 overflow-y:auto
}
.select2-container--default .select2-selection--single {
 background-color:#fff;
 border:1px solid #aaa;
 border-radius:4px
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
 color:#444;
 line-height:28px
}
.select2-container--default .select2-selection--single .select2-selection__clear {
 cursor:pointer;
 float:right;
 font-weight:700
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
 color:#999
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
 height:26px;
 position:absolute;
 top:1px;
 right:1px;
 width:20px
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
 border-color:#888 transparent transparent;
 border-style:solid;
 border-width:5px 4px 0;
 height:0;
 left:50%;
 margin-left:-4px;
 margin-top:-2px;
 position:absolute;
 top:50%;
 width:0
}
.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear {
 float:left
}
.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow {
 left:1px;
 right:auto
}
.select2-container--default.select2-container--disabled .select2-selection--single {
 background-color:#eee;
 cursor:default
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
 display:none
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
 border-color:transparent transparent #888;
 border-width:0 4px 5px
}
.select2-container--default .select2-selection--multiple {
 background-color:#fff;
 border:1px solid #aaa;
 border-radius:4px;
 cursor:text
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
 box-sizing:border-box;
 list-style:none;
 margin:0;
 padding:0 5px;
 width:100%
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
 list-style:none
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
 color:#999;
 margin-top:5px;
 float:left
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
 cursor:pointer;
 float:right;
 font-weight:700;
 margin-top:5px;
 margin-right:10px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
 background-color:#e4e4e4;
 border:1px solid #aaa;
 border-radius:4px;
 cursor:default;
 float:left;
 margin-right:5px;
 margin-top:5px;
 padding:0 5px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
 color:#999;
 cursor:pointer;
 display:inline-block;
 font-weight:700;
 margin-right:2px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
 color:#333
}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder {
 float:right
}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice {
 margin-left:5px;
 margin-right:auto
}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
 margin-left:2px;
 margin-right:auto
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
 border:1px solid #000;
 outline:0
}
.select2-container--default.select2-container--disabled .select2-selection--multiple {
 background-color:#eee;
 cursor:default
}
.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
 display:none
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
 border-top-left-radius:0;
 border-top-right-radius:0
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
 border-bottom-left-radius:0;
 border-bottom-right-radius:0
}
.select2-container--default .select2-search--dropdown .select2-search__field {
 border:1px solid #aaa
}
.select2-container--default .select2-search--inline .select2-search__field {
 background:0 0;
 border:none;
 outline:0;
 box-shadow:none;
 -webkit-appearance:textfield
}
.select2-container--default .select2-results__option[role=group] {
 padding:0
}
.select2-container--default .select2-results__option[aria-disabled=true] {
 color:#999
}
.select2-container--default .select2-results__option[aria-selected=true] {
 background-color:#ddd
}
.select2-container--default .select2-results__option .select2-results__option {
 padding-left:1em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
 padding-left:0
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
 margin-left:-1em;
 padding-left:2em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
 margin-left:-2em;
 padding-left:3em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
 margin-left:-3em;
 padding-left:4em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
 margin-left:-4em;
 padding-left:5em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
 margin-left:-5em;
 padding-left:6em
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
 background-color:#5897fb;
 color:#fff
}
.select2-container--default .select2-results__group {
 cursor:default;
 display:block;
 padding:6px
}
.select2-container--classic .select2-selection--single {
 background-color:#f7f7f7;
 border:1px solid #aaa;
 border-radius:4px;
 outline:0;
 background-image:-webkit-linear-gradient(top,#fff 50%,#eee 100%);
 background-image:-o-linear-gradient(top,#fff 50%,#eee 100%);
 background-image:linear-gradient(to bottom,#fff 50%,#eee 100%);
 background-repeat:repeat-x;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
}
.select2-container--classic .select2-selection--single:focus {
 border:1px solid #5897fb
}
.select2-container--classic .select2-selection--single .select2-selection__rendered {
 color:#444;
 line-height:28px
}
.select2-container--classic .select2-selection--single .select2-selection__clear {
 cursor:pointer;
 float:right;
 font-weight:700;
 margin-right:10px
}
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
 color:#999
}
.select2-container--classic .select2-selection--single .select2-selection__arrow {
 background-color:#ddd;
 border:none;
 border-left:1px solid #aaa;
 border-top-right-radius:4px;
 border-bottom-right-radius:4px;
 height:26px;
 position:absolute;
 top:1px;
 right:1px;
 width:20px;
 background-image:-webkit-linear-gradient(top,#eee 50%,#ccc 100%);
 background-image:-o-linear-gradient(top,#eee 50%,#ccc 100%);
 background-image:linear-gradient(to bottom,#eee 50%,#ccc 100%);
 background-repeat:repeat-x;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)
}
.select2-container--classic .select2-selection--single .select2-selection__arrow b {
 border-color:#888 transparent transparent;
 border-style:solid;
 border-width:5px 4px 0;
 height:0;
 left:50%;
 margin-left:-4px;
 margin-top:-2px;
 position:absolute;
 top:50%;
 width:0
}
.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear {
 float:left
}
.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow {
 border:none;
 border-right:1px solid #aaa;
 border-radius:4px 0 0 4px;
 left:1px;
 right:auto
}
.select2-container--classic.select2-container--open .select2-selection--single {
 border:1px solid #5897fb
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
 background:0 0;
 border:none
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
 border-color:transparent transparent #888;
 border-width:0 4px 5px
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
 border-top:none;
 border-top-left-radius:0;
 border-top-right-radius:0;
 background-image:-webkit-linear-gradient(top,#fff 0,#eee 50%);
 background-image:-o-linear-gradient(top,#fff 0,#eee 50%);
 background-image:linear-gradient(to bottom,#fff 0,#eee 50%);
 background-repeat:repeat-x;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
 border-bottom:none;
 border-bottom-left-radius:0;
 border-bottom-right-radius:0;
 background-image:-webkit-linear-gradient(top,#eee 50%,#fff 100%);
 background-image:-o-linear-gradient(top,#eee 50%,#fff 100%);
 background-image:linear-gradient(to bottom,#eee 50%,#fff 100%);
 background-repeat:repeat-x;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)
}
.select2-container--classic .select2-selection--multiple {
 background-color:#fff;
 border:1px solid #aaa;
 border-radius:4px;
 cursor:text;
 outline:0
}
.select2-container--classic .select2-selection--multiple:focus {
 border:1px solid #5897fb
}
.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
 list-style:none;
 margin:0;
 padding:0 5px
}
.select2-container--classic .select2-selection--multiple .select2-selection__clear {
 display:none
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
 background-color:#e4e4e4;
 border:1px solid #aaa;
 border-radius:4px;
 cursor:default;
 float:left;
 margin-right:5px;
 margin-top:5px;
 padding:0 5px
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
 color:#888;
 cursor:pointer;
 display:inline-block;
 font-weight:700;
 margin-right:2px
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
 color:#555
}
.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice {
 float:right;
 margin-left:5px;
 margin-right:auto
}
.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
 margin-left:2px;
 margin-right:auto
}
.select2-container--classic.select2-container--open .select2-selection--multiple {
 border:1px solid #5897fb
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
 border-top:none;
 border-top-left-radius:0;
 border-top-right-radius:0
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
 border-bottom:none;
 border-bottom-left-radius:0;
 border-bottom-right-radius:0
}
.select2-container--classic .select2-search--dropdown .select2-search__field {
 border:1px solid #aaa;
 outline:0
}
.select2-container--classic .select2-search--inline .select2-search__field {
 outline:0;
 box-shadow:none
}
.select2-container--classic .select2-dropdown {
 background-color:#fff;
 border:1px solid transparent
}
.select2-container--classic .select2-dropdown--above {
 border-bottom:none
}
.select2-container--classic .select2-dropdown--below {
 border-top:none
}
.select2-container--classic .select2-results__option[role=group] {
 padding:0
}
.select2-container--classic .select2-results__option[aria-disabled=true] {
 color:grey
}
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
 background-color:#3875d7;
 color:#fff
}
.select2-container--classic .select2-results__group {
 cursor:default;
 display:block;
 padding:6px
}
.select2-container--classic.select2-container--open .select2-dropdown {
 border-color:#5897fb
}

Let’s say I wanted to override something in the first block of this CSS, which is this:

.select2-container {
 box-sizing:border-box;
 display:inline-block;
 margin:0;
 position:relative;
 vertical-align:middle
}

Let’s change the margin to 5px:

.searchandfilter .select2-container {
 margin: 5px;
}

See how I added .searchandfilter to it? That makes my new CSS more specific. Of course, you have to place such code in to your theme, the theme customizer or a plugin like Simple Custom CSS.