Selectize.js: How to hide arrow icon?

[momsenmeister]

Hi,

is it possible to hide the arrow icon?
I want the input field to behave like a automplete input, not like a dropdown.
MaxItems is set to 1.

Thanks, Mike

[goolin]

If you look the css, there is the selector:

.selectize-control.single .selectize-input:after

just remove it (it is the css arrow definition).

[ramonesteban]

Another solution for this issue, without modifying the source code, is to set the option maxItems with '1' as a string, in order to skip the condition which insert a different css class in the input.

Write this,

$('select').selectize({ maxItems: '1' });

instead of

$('select').selectize({ maxItems: 1 });

(working with v0.11.2)

[edward93]

@ramonesteban thanks a lot, it helped :+1:

[enchance]

Thanks, @ramonesteban!

[ghooton]

You can also simply change the visibility to hidden...

.selectize-input::after
{
visibility:hidden;
}

[jeremyhalin]

Is it possible to hide/display carret icon whether or not there is options available ?
Because for people it's not clear, they try to open the dropdown but there is no options to select from.
I'm using selectize also like an autocomplete input.

[tsaltena]

@HJerem I was facing a similar issue, I wanted to hide the caret when the external Load function was not yet completed: The way I solved it was:
Create a CSS style that sets the border-color of the caret to white or transparent

.initialSelectize:after {
    border-color:white!important;
}

Add that class to the original inputClass Selectize Options

inputClass: 'form-control initial selectize-input',

Remove the class on the success criterion of the Load function. This selector could be a bit too broad still, but you get the point:

success: function() {
    $('.initial').removeClass('initial');
    callback etc... 
}

[jjinkxy]

If someone needs the caret to be hidden after a single input has been chosen (especially if they are using the remove button plugin), this worked for me:

.selectize-control.single .selectize-input.has-items::after {
  display: none;
}

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days