使引导输入看起来像selectize.js组件中的input-sm

时间:2016-08-20 20:48:20

标签: html css twitter-bootstrap

我有一个看起来像这样的选择组件。 enter image description here

我的目标是使搜索输入看起来更小,换句话说,将其类从标准引导输入更改为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 Fiddle中,输入的大小与我在应用程序中看到的元素的大小不同

1 个答案:

答案 0 :(得分:0)

input包含在具有填充和边框的容器中。 input本身的CSS重置为selectize.default.css(对于其他选择主题,这可能会有所不同)。但是,您可以使用此CSS控制元素的高度:

.selectize-input { padding: 0; }

此外,您可以将输入的字体大小调整为更高的高度:

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

如果必须,请使用!important。如果CSS正确级联,它应该可以工作。

<强>样本

&#13;
&#13;
// 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;
&#13;
.open>.dropdown-menu { padding: 0.5em; }

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

.selectize-input>input { font-size: 10px !important; }
&#13;
<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>
&#13;
&#13;
&#13;

jsFiddle:https://jsfiddle.net/azizn/dh725pd3/