8

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'
    )
);

3 Answers 3

7

You can now add browser-default class to sort of undo the effects of Materializecss.

Because we override many of the default browser styles and elements, we provide the .browser-default class to revert these elements to their original state.

https://materializecss.com/helpers.html#browser-default

4

Materialize has for-seen this possibility. Take a look at their selector for input:

input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea

There is everywhere the :not(.browser-default). Considering this, just apply this class to an input:

                <div class="row">
                    <div class="col s3">
                        <div>
                            <input type="text" placeholder="styled"/>
                        </div>
                        <div>
                            <input type="text" class="browser-default" placeholder="not styled"/>
                        </div>
                    </div>
                </div>

Renders as this (screenshot)

3

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.

1
  • 2
    this answer is outdated (see Rishav's answer below)
    – jaronimoe
    Commented Jun 15, 2020 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.