I am currently working with a selectize component that appears like this: https://i.sstatic.net/z2aTw.png
My objective is to adjust the appearance of the search input to make it smaller by changing its class from the standard bootstrap input to input-sm. I believe I need to modify the source code, but I am unsure of where and how to do this. Can you please assist me with this? I have been trying to address this issue intermittently for the past four months.
JS:
vendors_name_selectize = $('#vendors_name_input').selectize({
maxItems: 100,
preload: true,
openOnFocus:true,
valueField: 'value',
labelField: 'text',
searchField: ['text', 'inn', 'kpp'],
})[0].selectize;
HTML:
<th style='width:20%' class='vendor_list_official_name'>
<div class="input-group zeon-column-search">
<div class="dropdown">
<button type="button" data-toggle="dropdown">
Название
<span class="caret"></span>
</button>
<div class="dropdown-menu zeon-dropdown-wide">
<select id="vendors_name_input" placeholder="Поиск">
</select>
</div>
</div>
</div>
</th>
On another note, there is no need to create a JSFiddle since the size of the input there differs from what I am seeing in my application.