在selectize.js组件中使Bootstrap输入看起来像input-sm

Question

我有一个看起来像这样的selectize组件。

我的目标是使搜索输入看起来更小，换句话说，将其类从标准自举输入更改为input-sm。 我想我必须编辑源代码，只有在哪里和如何 - 你能帮我这个吗？自从我不时回到这个问题已经有四个月了。

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> 

顺便说一句，有没有点建立一个的jsfiddle，因为JS小提琴输入的大小由该元素的不同，我请参阅我的应用程序

Answer 1

将input包装在具有填充和边框的容器中。 input本身的CSS重置为selectize.default.css（对于其他选择性主题，这可能会有所不同）。但是，你可以用这个CSS控制元素的高度：

.selectize-input { padding: 0; } 

此外，您可以让输入更加高度降低较小的字体大小：

.selectize-input>input { font-size: 10px; } 

使用!important，如果你要。如果级联正确，CSS应该可以工作。

DEMO

// bootstrap 3.3.6 
 
// jquery 2.2.1 
 
// fontawesome 4.5.0 
 

 
vendors_name_selectize = $('#vendors_name_input').selectize({ 
 
    maxItems: 100, 
 
    preload: true, 
 
    openOnFocus: true, 
 
    valueField: 'value', 
 
    labelField: 'text', 
 
    searchField: ['text', 'inn', 'kpp'], 
 
})[0].selectize;

.open>.dropdown-menu { padding: 0.5em; } 
 

 
.selectize-input { padding: 0 !important; } 
 

 
.selectize-input>input { font-size: 10px !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.2/js/standalone/selectize.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.2/css/selectize.default.min.css" rel="stylesheet"/> 
 

 
<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>

的jsfiddle：https://jsfiddle.net/azizn/dh725pd3/