CODEWITHSUNDEEP
htmlcssformsmaterial-design
Khushbu Vaghela
Khushbu Vaghela

Reputation: 619

Material Design Form Error

I'm working on material design of HTML form. I don't want required input text filed. But my material design works only if input has required attribute. I've tried to change css from :valid to :not(:focus), :invalid, :optional but it did not work.

Problem: If I enter in the input field, The label goes to top, after typing something when I leave the input field the label comes to its initial position. I don't want the label to come to its original position after typing. Label should go to top only after typing.

Here is my form: 

.form-row {
  position: relative;
  margin-top: 30px;
}

.form-label {
  position: absolute;
  top: 17px;
  left: 20px;
  color: #999;
  cursor: text;
  transition: all .15s ease-in-out 0s;
  -webkit-transition: all .15s ease-in-out 0s;
  -moz-transition: all .15s ease-in-out 0s;
  -ms-transition: all .15s ease-in-out 0s;
  -o-transition: all .15s ease-in-out 0s;
}

.form-textbox,
.form-submit {
  width: 100%;
  padding: 20px;
}

.form-textbox:focus~.form-label,
.form-label:after {
  top: 10px;
  left: 12px;
  font-size: 10px;
  color: inherit;
  cursor: pointer;
}
<div class="form-row">
  <input type="text" id="form-email" class="form-textbox">
  <label for="form-email" class="form-label">Testing</label>
</div>

Any help will be appreciated. Thank you in advance.

Upvotes: 1

Views: 915

Answers (3)

Siddaram H
Siddaram H

Reputation: 1176

You can write some custom javascript for the expected functionality. @Khushbu Vaghela, I've updated little bit of css and javascript as per your need

function hideLabel(){
  txtEmail =  document.getElementById('form-email')
  lblEmail =  document.getElementsByClassName('form-label')[0]
  if(txtEmail.value != ''){
    lblEmail.classList.add("form-label-content");
  } else {
    lblEmail.classList.remove("form-label-content");
    lblEmail.innerText = 'Testing';
  }
}
.form-row {
      position: relative;
      margin-top: 30px;
    }

    .form-label {
      position: absolute;
      top: 17px;
      left: 20px;
      color: #999;
      cursor: text;
      transition: all .15s ease-in-out 0s;
    }
    .form-textbox,
    .form-submit {
      width: 100%;
      padding: 20px;
    }

 
    .form-textbox:focus ~ .form-label {
      top: 10px;
      left:12px;
      font-size: 10px;
      color: inherit;
      cursor: pointer;
    }
    
    .form-textbox:not(:focus) ~ .form-label-content {
      top: 10px;
      left:12px;
      font-size: 10px;
      color: inherit;
      cursor: pointer;
    }
<div class="form-row">
      <input type="text" id="form-email" onFocusOut="hideLabel()" class="form-textbox">
      <label for="form-email" class="form-label">Testing</label>
</div>

Upvotes: 1

BloodyMonkey
BloodyMonkey

Reputation: 1634

Like Siddaram H say, you can do it with a simple js function. But if you want it to always be visible, transform .form-textbox:focus in a class like .edited

if (txtEmail.value != '') {
  lblEmail = document.getElementsByClassName('form-label')[0]
  lblEmail.classList.add('edited');
}
.edited {
  top: 10px;
  left: 12px;
  font-size: 10px;
  color: inherit;
  cursor: pointer;
}

Upvotes: 1

SapuSeven
SapuSeven

Reputation: 1573

You can check if the input field contains text by using the :valid-pseudoclass.

EDIT: Sorry I just read your question more careful

.form-row {
  position: relative;
  margin-top: 30px;
}

.form-label {
  position: absolute;
  top: 17px;
  left: 20px;
  color: #999;
  cursor: text;
  transition: all .15s ease-in-out 0s;
}

.form-textbox,
.form-submit {
  width: 100%;
  padding: 20px;
}

.form-textbox:focus~.form-label,
.form-textbox:valid~.form-label,
.form-label:after {
  top: 10px;
  left: 12px;
  font-size: 10px;
  color: inherit;
  cursor: pointer;
}
<div class="form-row">
  <input type="text" id="form-email" class="form-textbox" required>
  <label for="form-email" class="form-label">Testing</label>
</div>

Another way to do this with pure CSS is using the :placeholder-shown-pseudoclass. Unfortunately, this does not work in IE or Edge at all.

.form-row {
  position: relative;
  margin-top: 30px;
}

.form-label {
  position: absolute;
  top: 17px;
  left: 20px;
  color: #999;
  cursor: text;
  transition: all .15s ease-in-out 0s;
}

.form-textbox,
.form-submit {
  width: 100%;
  padding: 20px;
}

.form-textbox:focus~.form-label,
.form-textbox:not(:placeholder-shown)~.form-label,
.form-label:after {
  top: 10px;
  left: 12px;
  font-size: 10px;
  color: inherit;
  cursor: pointer;
}
<div class="form-row">
  <input type="text" id="form-email" class="form-textbox" placeholder=" ">
  <label for="form-email" class="form-label">Testing</label>
</div>

Upvotes: 1

Related Questions