Customise dropdown (combobox)

Anonymous

#180285

Hello,

I’d like to customise the dropdown (combobox version) with more than just CSS. I’d like the search field that appears to be visible before pressing the actual dropdown. As it is now, the search window only appears as you click the dropdown (making it unclear that you can type in it beforehand).

Thanks!

Trevor

#180286

This reply has been marked as private.

Anonymous

#180288

This reply has been marked as private.

Trevor

#180299

Are you able to send me a live link/URL to your search page so I can take a look?

Anonymous

#180320

This reply has been marked as private.

Trevor

#180345

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.

Anonymous

#180444

Hello again,

I’ve made the change to Select2 script instead of Combobox. I understand how to make CSS changes, but since it requires an actual move of the div I needed more help.

I can see that the dropdown and search field appears in the footer with Select2. How should I proceed?

Anonymous

#180450

Actually, I made the change and noticed that Select2 doesn’t work as well as Combobox. When I try to search with Select2 it doesn’t find the results.

I’ve added “Sweden” and “Swaziland” as two search options. With Select2, if I start searching for “sw” it only shows “Sweden” and not “Swaziland”. With Combobox it shows both.

Is there any way we can do this with Combobox? Can I make changes to its core html anywhere?

Trevor

#180456

The form field should be set to Combobox, Select2 is simply a formatting and filtering mechanism. Do you have Skype, we could do this over screen share?

Anonymous

#180465

I’m afraid I can’t do that for privacy reasons.

I’ve changed it back to Select2 (like you suggested: https://ibb.co/dZeQfJ), and now it seems to be working OK again. Maybe it had something to do with cache, I’m not sure.

However, another issue with using Select2 script is that when you click the dropdown (#select2-selection__rendered) the cursor jumps into the search field and then straight out of it again. When you start typing it selects the first thing in the dropdown instead of typing in the search field. So you have to press #select2-selection__rendered and then press the search box to search. Combobox script does not do this. Try visiting the website again and you’ll see what I mean.

The form field is set to Combobox, I’ve only changed the “Combobox script” in the settings like you suggested. https://ibb.co/c5NE7y

[Author]

Posts