Search code examples
htmlcssmaterialize

How do I style each option in select to use a different font (using materialize css framework)

I want to style each option in select to use a different font family in materialize css framework shown in this img url I have achieved this by styling each option with an id got from using inspect element but that does not stay and resets when the browser is refreshed
id is auto generated and looks like this

li#select-options-5ea35c39-e3ba-6859-c611-43359ab710b32{
font-family: 'Homemade Apple', cursive !important;
font-size: 25px;}

Things I have tried

  1. Using different class/id on each option and styling it in css with !important but that doesn't override default styling.
  2. Using .dropdown-content, .select-dropdown classes but this style the whole thing not individual
  3. Using .select-dropdown li>span this also style everything in the select
Solution

  • @kushal It worked thanks.. now I got it.. I targeted span element after every nth-child

    .select-dropdown>li:nth-child(2)>span{
font-family: 'Indie Flower', cursive;
font-size: 1.5em;
color: black;
}
.select-dropdown>li:nth-child(3)>span{
font-family: 'Dawning of a New Day', cursive;
font-size: 1.8em;
color: blue;
}

    And so on.. Here is the result https://ibb.co/gvfMyWq