es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cambiando el Cuidador de Selectize

¿Cómo puedo hacer que el caret de selectize sea un ícono de Font Awesome? La solución en este ejemplo no parece funcionar para mí.

Este es mi 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>

Este es mi 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";
}

Este es mi 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();
                }
            }
        });

Utilizando el inspector de mi navegador puedo ver que este código tiene más especificidad que selectize.css, pero aún así resulta en esto.

Obviamente, eso no es lo que quiero. Idealmente, el caret triangular sería reemplazado completamente por el ícono de lupa.

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Para hacer que el caret de selectize sea un ícono de Font Awesome, puedes usar el siguiente código CSS:

    .selectize-dropdown[data-selectable]/.selectize-dropdown-content .fa::before,
    .selectize-dropdown[data-selectable]/.selectize-dropdown-header .fa::before {
        content: "\f002"; /* Reemplaza con el código del ícono de Font Awesome que desees */
        font-family: "Font Awesome 5 Pro" !important;
        display: inline-block;
        font-weight: 900;
        font-style: normal;
        text-decoration: inherit;
        text-rendering: auto;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
    }
    

    Asegúrate de reemplazar el valor de “content” con el código del ícono de Font Awesome que desees. Además, agrega los archivos CSS necesarios de Font Awesome a tu proyecto si aún no lo has hecho.

    Ten en cuenta que este código CSS anula el CSS predeterminado de selectize y debe ser agregado después de él en tu archivo CSS o etiqueta de estilo.

Comments are closed.