更改选择性Caret

Question

如何使选择性插入符号成为字体真棒图标？这个例子中的解决方案似乎对我不起作用

这是我的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>

这是我的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";
}

这是我的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();
}
}
});

使用浏览器的检查器，我可以看到这个代码比selectize.css更具特异性，但仍然会导致这种情况。

显然，这不是我想要的。理想情况下，三角形插入符号将被放大镜图标完全取代。

Answer 1

我也有同样的问题，即默认的插入符号图标和放大镜图标出现，与图片中的一模一样https://i.stack.imgur.com/aJO21.png.

我通过添加一个透明的边界来解决这个问题，比如：

&:after {
border-color: transparent !important;

// then add the icon you want, in my case:
font-family: standard_icon;
content: "e00a";
font-size: 12px;
}