Changing Selectize Caret

Question

How do I make the selectize caret a Font Awesome Icon? The solution in this example doesn't seem to work for me.

This is my HTML:

<div class="form-group">
     <label class="control-label" for="input_name">Input</label>
     <input type="text" autocomplete="off" class="form-control js-server-side-selectize" name="input_name" placeholder="None Selected" data-load="/backend/endpoint" value="" />
</div>

This is my CSS:

.selectize-control.js-server-side-selectize:not(.loading) .selectize-input::after,
.selectize-control.single.js-server-side-selectize:not(.loading) .selectize-input::after,
.selectize-control.single.js-server-side-selectize:not(.loading) .selectize-input.dropdown-active::after {
  content: "\F002";
  font-family: "Font Awesome 5 Pro";
}

This is my JS:

$('[name="input_name"]').selectize({
                valueField: "id",
                labelField: "name",
                searchField: "name",
                selectOnTab: true,
                loadThrottle: 450,
                maxItems: 1,
                load: function (search, cb) {
                    var selectize = $(this)[0];
                    var url = this.$input.data('load');

                    if (search.length >= 1) {
                        $.ajax({
                            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                            url: url,
                            data: { search: search },
                            type: 'POST',
                            success: function (res) {
                                cb(res.data);
                            },
                            error: function () {
                                cb();
                            }
                        });
                    }
                    else {
                        selectize.close();
                        cb();
                    }
                }
            });

Using my browser's inspector I can see this code has more specificity than selectize.css, but still results in this.

Obviously, that's not what I want. Ideally, the triangular caret would be entirely replaced by the magnifying glass icon.

Answer 1

I also have the same problem, that is, the default caret icon and the magnifying glass icon appear, exactly like in your picture https://i.sstatic.net/aJO21.png.

I solved it by adding a transparent border, like this:

           &:after {
             border-color: transparent !important;
             
             // then add the icon you want, in my case:
             font-family: standard_icon;
             content: "\e00a";
             font-size: 12px;
           }