CODEWITHSUNDEEP
material-designmaterialize
MustModify
MustModify

Reputation: 697

Change "materialize" css framework to use "outlined" material-style form inputs

My goal is to create an input like the one described as being 'outline variant' in these Material docs.

How do I configure and/or what CSS should I add to materialize CSS forms to use the 'outline' variant?

Upvotes: 1

Views: 2834

Answers (2)

Tony M
Tony M

Reputation: 106

There appears to be a few issues/requests for this outline variant, but the Materialize folks have indicated that it wasn't part of the spec at the time and have subsequently closed the issues.

I dug through some of the Material samples versus styling on the Materialize framework and noticed that they are handling things slightly different as far as padding, borders/shadows etc.

Achieving this outline variant as the default treatment is going to require some slightly destructive style updates that should probably be handled via the preprocessed files, but here is an example of some quick and dirty overrides

Note the addon class "input-outlined" in the markup:

<div class="col input-field input-outlined s6">
  <input placeholder="Placeholder" id="first_name" type="text" class="validate">
  <label for="first_name">First Name</label>
</div>

Upvotes: 2

Lirum
Lirum

Reputation: 49

As far as I can tell, they're related but not the same project and do not use the same CSS files. I was using a CDN link for Materialize for a little while and none of the Material.io classes were taking effect.

Then I switched over to using the suggested Material.io CDN links, found here: https://material.io/develop/web/docs/getting-started/

Once I did that, I could use the HTML markup and class names that became visible on the page you provided after I clicked the "Web" tab.

It works. Here is a Codepen showing both styles of text inputs in action (this Codepen is using the Material.io CDN links in the settings).

The main difference between filled and outlined is that filled looks to be the default. I'm inferring that the Material.io design system has you repeat the classname and append a modifier if you wish to deviate from the default.

For instance, in the linked codepen, notice that the filled (default) text field is inside <div class="mdc-text-field"> while the outlined text field is inside <div class="mdc-text-field mdc-text-field--outlined"></div>.

Upvotes: 0

Related Questions