Question

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

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

Answer 1

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

.selectize-input { padding: 0; }

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

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

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

<强>样本

＆＃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;

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

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

1 个答案: