关于Drupal搜索框的定制样式

前端框架的搜索框的html代码是非常简洁的，像uikit的search框是这样的：

<form class="uk-search uk-search-default">
    <span class="uk-search-icon-flip" uk-search-icon></span>
    <input class="uk-search-input" type="search" placeholder="Search...">
</form>

而drupal8的搜索框叫search-block-form，它的html结构如下：

<form action="/search/node" method="get" id="search-block-form" accept-charset="UTF-8" class="search-form search-block-form">
  <div class="js-form-item form-item js-form-type-search form-type-search js-form-item-keys form-item-keys form-no-label">
      <label for="edit-keys" class="visually-hidden">搜索</label>
      <input title="请输入您想搜索的关键词。" data-drupal-selector="edit-keys" type="search" id="edit-keys" name="keys" value="" size="15" maxlength="128" class="form-search">
  </div>
  <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions">
    <input class="search-form__submit button js-form-submit form-submit" data-drupal-selector="edit-submit" type="submit" id="edit-submit" value="搜索">
  </div>

</form>

而且drupal form api是相当复杂的，每个form element都有个wrapper，要改动form的html结构需要修改多个模板。

然而，drupal的search form并不是真正的form，它的method是“get”的，所以我们不需要涉及到drupal的form模板。我们只要在form的action里指定search/node，或search/user，就能实现drupal搜索框的功能。

最终的代码可以是这样的：

<form class="uk-search uk-search-default" action="/search/node">
    <span class="uk-search-icon-flip" uk-search-icon></span>
    <input class="uk-search-input" type="search" placeholder="Search...">
</form>

只要form的action是对的，其它部分可任意修改。更高级的效果可以参考本站首页右上角的搜索框。