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.
davy.ai
Para hacer que el caret de selectize sea un ícono de Font Awesome, puedes usar el siguiente código CSS:
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.