MaterializeCSS autocomplete edit css

Question

I have been trying to customize a search bar that I initially created using MaterializeCSS. I am using the Autocomplete functionality in order to make searching easier. However, I have been unable to successfully change the green MaterializeCSS font colors and size, etc. Both in the input and in the dropdown that appears when people search. I would very much appreciate if someone here could help. I have tried changing the CSS in lots of ways but have been unsuccessful.

<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

It looks like your input element has a class of .grey-text that has a color: #9e9e9e !important; declaration which will override any color styles you add. I'd recommend removing that class (and maybe the .white class):

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

And your CSS has an extra space between input and .autocomplete (also don't need the !important anymore):

.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