Search code examples
csssymfonymaterialize

How to exclude Materialize style from one element


I am using Materialize in a project but I don't want it on this particular select element:

<select>            
    <option value="Male">m</option>            
    <option value="Female">f</option>
</select>

I think the only way to solve it is to make my own style and apply it to the element but as Materialize is new maybe there is an easier solution.

By the way I am using Symfony3 and every component added in the type.php file is rendered excellent with Materialize, except a ChoiceType. So that's why I want to exclude the Materialize style of the select element. This is the code:

$opcionesLibreDeTalco = array(
    'label'   => 'Libre de talco',
    'choices' => array(
        'm' => 'Male',
        'f' => 'Female'
    )
);

Solution

  • As of Materialize 0.97.7, there's no way to exclude an element because their CSS selectors are very broad with no exclusions.

    For example, their scss looks like:

    select {
      background-color: $select-background;
      width: 100%;
      padding: $select-padding;
      border: $select-border;
      border-radius: $select-radius;
      height: $input-height;
    }
    

    You just have to manually override Materialize's styles.