title: MaterializeCSS autocomplete edit css
body: <p>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.</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"&gt;
  
  &lt;section id="search" class="section white-text blue section-search center scrollspy"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col s12"&gt;
          &lt;h3&gt;Search destinations&lt;/h3&gt;
          &lt;div class="input-field"&gt;
            &lt;i class="material-icons prefix"&gt;search&lt;/i&gt;
            &lt;input type="text" class="white grey-text autocomplete" id="autocomplete-input" placeholder="Search" /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    .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;
      }
  </code></pre>
  
  <p>Javascript: </p>
  
  <pre><code>  // Autocomplete
    const ac = document.querySelector('.autocomplete');
    M.Autocomplete.init(ac, {
      data: {
        "Banana": null,
        "Apple": null,
        "Coconut": null,
        "Carrot": null,
        "Pear": null,
      }
    });
  </code></pre>