Search code examples
htmlcssmaterial-designmaterialize

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

Just trying to put the text and arrow in white:

enter image description here

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>
Solution

  • 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.