title: Custom Made Material Design Form (FrontEnd)
body: <p>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. </p>
  
  <pre><code> &lt;div class="form__group"&gt;
   &lt;input type="email" id="email" class="form__field" placeholder="Your Email"&gt;
   &lt;span for="email" class="span-header form__label"&gt;Your Email&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Picture doesn't allow me to type, when I tried to click on label(Your Email)</p>
  
  <p><a href="https://i.stack.imgur.com/ibULj.png" rel="nofollow noreferrer">Click on the label -image</a></p>
  
  <p>Picture allows me to type when I tried to click outside the label</p>
  
  <p><a href="https://i.stack.imgur.com/oDOoO.png" rel="nofollow noreferrer">Click outside the label -image</a></p>
  
  <p>CSS:</p>
  
  <pre><code>.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;
    }
  </code></pre>