CODEWITHSUNDEEP
htmlcss
King RG
King RG

Reputation: 510

Custom Made Material Design Form (FrontEnd)

I tried to used this code to create a custom made textfield like material design. I don't know how I'm going to do with the error because When you try to click on textfield in the exact location of label(Your Email) of it, the text field dont allow me to type. But when you try to click outside the label of the textfield it will allow you to type. What I'm trying to do is when you click outside the label or to the exact place of label, the textfield will allow you to type. 

 <div class="form__group">
 <input type="email" id="email" class="form__field" placeholder="Your Email">
 <span for="email" class="span-header form__label">Your Email</span>
</div>

Picture doesn't allow me to type, when I tried to click on label(Your Email)

Click on the label -image

Picture allows me to type when I tried to click outside the label

Click outside the label -image

CSS:

.form__group {
 position: relative;
 padding: 15px 0 0;
 margin-top: 10px;
 }

.form__field {
 font-family: inherit;
 width: 100%;
 border: 0;
 border-bottom: 1px solid #d2d2d2;
 outline: 0;
 font-size: 16px;
 color: #212121;
 padding: 7px 0;
 background: transparent;
 transition: border-color 0.2s;
 }

 .form__field::-webkit-input-placeholder {
  color: transparent;
  }

  .form__field:-ms-input-placeholder {
  color: transparent;
  }

 .form__field::-ms-input-placeholder {
  color: transparent;
  }

 .form__field::placeholder {
  color: transparent;
  }

 .form__field:placeholder-shown ~ .form__label {
  font-size: 16px;
  cursor: text;
  top: 20px;
 }

.span-header,
.form__field:focus ~ .form__label {
 position: absolute;
 top: 0;
  display: block;
  transition: 0.2s;
  font-size: 12px;
 color: #9b9b9b;
 }

 .form__field:focus ~ .form__label {
  color: #009788;
 }

.form__field:focus {
 padding-bottom: 6px;
  border-bottom: 2px solid #009788;
  }

Upvotes: 1

Views: 59

Answers (1)

Abhishek Pandey
Abhishek Pandey

Reputation: 13568

Use <label for="email"> instead of span.

The id of a labelable form-related element in the same document as the <label> element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. If it is not labelable then the for attribute has no effect. If there are other elements which also match the id value, later in the document, they are not considered.

.form__group {
  position: relative;
  padding: 15px 0 0;
  margin-top: 10px;
}

.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #d2d2d2;
  outline: 0;
  font-size: 16px;
  color: #212121;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
}

.form__field::-webkit-input-placeholder {
  color: transparent;
}

.form__field:-ms-input-placeholder {
  color: transparent;
}

.form__field::-ms-input-placeholder {
  color: transparent;
}

.form__field::placeholder {
  color: transparent;
}

.form__field:placeholder-shown~.form__label {
  font-size: 16px;
  cursor: text;
  top: 20px;
}

.span-header,
.form__field:focus~.form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 12px;
  color: #9b9b9b;
}

.form__field:focus~.form__label {
  color: #009788;
}

.form__field:focus {
  padding-bottom: 6px;
  border-bottom: 2px solid #009788;
}
<div class="form__group">
  <input type="email" id="email" class="form__field" placeholder="Your Email">
  <label for="email" for="email" class="span-header form__label">Your Email</label>
</div>

Upvotes: 1

Related Questions