Question

我一直在尝试自定义我最初使用MaterialiseCSS创建的搜索栏。我正在使用自动填充功能，以便更轻松地进行搜索。但是，我无法成功更改绿色MaterialiseCSS字体的颜色和大小等。在人们搜索时出现的输入和下拉列表中都有。如果有人在这里帮助我，我将非常感激。我尝试过很多方式改变CSS，但都没有成功。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

<section id="search" class="section white-text blue section-search center scrollspy">
  <div class="container">
    <div class="row">
      <div class="col s12">
        <h3>Search destinations</h3>
        <div class="input-field">
          <i class="material-icons prefix">search</i>
          <input type="text" class="white grey-text autocomplete" id="autocomplete-input" placeholder="Search" />
        </div>
      </div>
    </div>
  </div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

CSS：

    .section-search input {
      padding: 5px !important;
      font-size: 18px !important;
      width: 90% !important;
      border: #f4f4f4 3px solid !important;
      background-color: red !important;
    }

    .section-search input .autocomplete {
      color: #000 !important;
    }

Javascript：

  // Autocomplete
  const ac = document.querySelector('.autocomplete');
  M.Autocomplete.init(ac, {
    data: {
      "Banana": null,
      "Apple": null,
      "Coconut": null,
      "Carrot": null,
      "Pear": null,
    }
  });

Answer 1

看起来您的input元素的.grey-text类具有color: #9e9e9e !important;声明，该声明将覆盖您添加的任何颜色样式。我建议删除该类（也许是.white类）：

<input type="text" class="autocomplete" id="autocomplete-input" placeholder="Search" />

你的CSS在input和.autocomplete之间有一个额外的空格（也不再需要!important）：

.section-search input.autocomplete {
  color: #000;
}
.input-field .prefix.active {
  color: #000!important;
}
.dropdown-content li>a, .dropdown-content li>span {
  color: #000!important;
}
.autocomplete-content li .highlight {
  color: red!important;
}

<强> Working Example

MaterialiseCSS自动完成编辑css

1 个答案: