ブートストラップ入力をselectize.jsコンポーネントの入力-smのようにする

Question

私はこのようなselectizeコンポーネントを持っています。

私の目標は、検索入力を小さく見えるようにすることです。言い換えれば、そのクラスを標準のブートストラップ入力からinput-smに変更することです。 私はソースコードを編集する必要があると思います。どこでどのように - これで私を助けてくれますか？私は今、この問題に戻ってからすでに4ヶ月経っています。

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> 

JSフィドルに入力の大きさは要素のものとは異なるので、何ポイント建物までJSFiddleは、ありませんI私のアプリで見てください

Answer 1

inputは、パディングと境界線を持つコンテナの中にラップされています。 input自体のCSSリセットはselectize.default.cssです（これは他の選択テーマでは異なる場合があります）。ただし、このCSSで要素の高さを制御することができます：あなたがしなければならない場合、

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

使用!important：

.selectize-input { padding: 0; } 

はまた、あなたはより多くの高さの低減のための小さな入力のフォントサイズを作ることができます。 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/