Search code examples
material-designmaterialize

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?


Solution

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