Is there a way to change the color of the text and arrow in a Materializecss Select?

Question

Just trying to put the text and arrow in white:

Here's the code:

<div class="input-field col s12 white-text">
  <select class="white-text" id="selectSide">
    <option value="All" selected>All</option>
    <option value="Buy">Buy</option>
    <option value="Sell">Sell</option>
  </select>
  <label class="white-text">Side</label>
</div>

Answer 1

The actual styles applied to the input, dropdown and icon are as follows:

For the icon:

.select-wrapper .caret {

    fill: firebrick;
}

For the dropdown content:

.dropdown-content li span {  
    color: firebrick;   
}

For the selected item colour:

.dropdown-content li span {  
    color: firebrick;   
}

Obviously change firebrick to your desired colour. Side note, Materializecss hides the original select element and creates a new one with a built in dropdown - so the styles above (.dropdown-content and .select-wrapper) are dynamically generated and thus a little hard to style if you're looking at the original markup.

Working demo here .