john
john

Reputation: 115

Materialize CSS reduce gap between Input field and label

I have a form created using materialize CSS. In the form there is an email field, the default gap between the email input field and the label does not suit me, I would like reduce the gap. I have tried the following CSS but it did not work.

CSS Class tried

.EmailInputFieldSettings{
    margin-top:-1rem;
 } 

Here is how it appears

enter image description here

Here is the code for the email input field

 <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <input id="email" type="email" class="validate EmailInputFieldSettings">
          <label for="email">Email</label>
        </div>
      </div>
    </form>
  </div>

How can I achieve this?

Thank you.

Upvotes: 0

Views: 388

Answers (1)

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Change top CSS

.input-field > label {
    top: 9px;
}

Upvotes: 3

Related Questions