title: Make input boxes stay white once text is inside them
body: <p>I would like my input boxes to have a white background once text appears inside the box.  After the user clicks out of the box, if there is still text inside the box, I would like for it to appear white. If anyone knows how to do this I would appreciate your help.  I attached a fiddle of what my code looks like as well as a picture of a comp that I want my form to look like.</p>
  
  <p><a href="https://i.stack.imgur.com/qyX2P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qyX2P.png" alt="Comp I would like my code to look like"></a>
  []Fiddle]<a href="http://jsfiddle.net/M6N24/540/" rel="nofollow noreferrer">2</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function phoneNumber(phone)  {
    var phoneno = /^\d{9,11}$/;
  
    console.log("PHONE: "+phoneno.test(phone));
    return phoneno.test(phone);
  }
  
  $('input[type="tel"]').on('keyup', function() {
    var $label = $(this).closest('label');
    if ($(this).val().trim() != '') {
      if ($(this).is('#phone')) {
        if (phoneNumber($(this).val())) {
          $label.attr('data-valid', 'valid');
           $(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle");
        } else {
          $label.attr('data-valid', 'error');
           $(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o");
        }
      } else {
        $label.attr('data-valid', 'valid');
      }
    } else {
      $label.removeAttr('data-valid');
  
    }
  });
  
  function validateEmail(email) {
    var re = /^(([^&lt;&gt;()[\]\\.,;:\s@\"]+(\.[^&lt;&gt;()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  
    console.log("email: "+re.test(email));
    return re.test(email);
  }
  
  $('input[type="text"]').on('keyup', function() {
    var $label = $(this).closest('label');
    if ($(this).val().trim() != '') {
      if ($(this).is('#email')) {
        if (validateEmail($(this).val())) {
          $label.attr('data-valid', 'valid');
          $(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle");
  
        } else {
          $label.attr('data-valid', 'error');
           $(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o");
        }
      } else {
        $label.attr('data-valid', 'valid');
      }
    } else {
      $label.removeAttr('data-valid');
    }
  
  });
  
  
  test = function() {
    if ($("#first_name").val()
        &amp;&amp; $("#last_name").val()
        &amp;&amp; (validateEmail($("#email").val()))
        &amp;&amp; (phoneNumber($("#phone").val()))
        &amp;&amp; $("#phone").val()
        &amp;&amp; $("#city").val()
        &amp;&amp; $("#state").val()
        &amp;&amp; $("#company").val()
        &amp;&amp; $("#comments").val()) {
  
      $("#sub").removeAttr("disabled") &amp;&amp; $("#sub2").removeAttr("disabled");
    }
  }
  
  
   $('#phone').keydown(function(){
     var self = $(this);
     var removedText = self.val().replace(/\D/, '');
  
     self.val(removedText);
  });
  
  
  $("#contact_form").submit(function(event) {
      console.log("Form success");
      ("#contact_form").
      event.preventDefault();
      return false;
  })
  
  $("#sub").submit("click", function(e){e.preventDefault()})
  
  $("#sub").on("click", function(e)
  {
   $("#contact_form").remove();
   $("#thankyou").addClass("success");
  })
  
  
  $("#sub2").submit("click", function(e){e.preventDefault()})
  
  $("#sub2").on("click", function(e)
  {
   $("#contact_form").remove();
   $("#thankyou").addClass("success");
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    color: #fff;
    background-color: #30bda6;
    text-align: center;
  }
  
  form {
    color: #fff;
    background-color: #f78e2a;
    text-align: center;
    font-family: Lato;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .form-title {
    font-size: 38px;
    color: #fff;
    font-family: "Lato";
    letter-spacing: 70px;
  }
  
  input {
    font-size: 15px;
    height: 48px;
    margin-top: 8px;
    color: #333;
  }
  
  input[type="tel"] {
    width: 100%;
    padding: 10px;
    background-color: #f9a558;
    border: 1px solid #fff;
    font-size: 15px;
    height: 48px;
    color: #333;
  
  }
  input[type="text"] {
    width: 100%;
    padding: 10px;
    background-color: #f9a558;
    border: 1px solid #fff;
    font-size: 15px;
    color: #333;
  
  }
  
  input:focus {
    background-color: #fff;
  }
  
  
  input[type="text"]:focus {
    background-color: #fff;
  }
  
  input[type="text"]:visited {
    background-color: #fff;
  }
  
  input[type="tel"]:focus {
    background-color: #fff;
  }
  
  input[type="tel"]:visited {
    background-color: #fff;
  }
  
  .container {
    display: flex;
    flex-direction: column;
    padding: 5px 0;
  }
  
  textarea {
    width: 100%;
    background-color: #f9a558;
    border: 1px solid #fff;
    color: #333;
    font-family: Lato;
  }
  
  textarea:focus {
    background-color: #fff;
  }
  
  #co {
    flex-basis: 100%;
    max-width: 100%;
  }
  
  label:nth-last-child(-n+2) {
    flex-basis: 100%;
    max-width: 100%;
  }
  
  select,
  label {
    height: 50px;
    width: 48%;
    margin: 2% 1%;
    text-align: left;
    font-family: "Lato";
    font-size: 15px;
  }
  
  #sub {
    border-radius: 6px;
    width: 120px;
    height: 35px;
    text-transform: uppercase;
    display: block;
    margin-top: 48px;
    font-size: 16px;
    font-family: Lato;
    border: none;
  }
  
  #sub2 {
    border-radius: 6px;
    width: 120px;
    height: 35px;
    text-transform: uppercase;
    display: block;
    margin-top: 48px;
    font-size: 16px;
    font-family: Lato;
    border: none;
  }
  
  
  label {
    position: relative;
  }
  
  .fa {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(-50%, 65%);
    opacity: 0;
    transition: opacity .5s, color .5s;
  }
  
  [data-valid] .fa {
    opacity: 1;
    color: #00594C;
  }
  
  [data-valid="valid"] .fa {
    color: #00594C;
  }
  
  [data-valid="error"] .fa {
    color: #AB0000;
  }
  
  .error {
    display: none;
    color: #AB0000;
    font-size: .7em;
    position: absolute;
    left: 10px;
    top: 0;
    transform: translateY(150%);
    font-size: 12px;
    margin-top: 2px;
  }
  
  [data-valid="error"] .error {
    display: block;
  }
  
  input#sub2:not([disabled]){
      background-color: #fff;
      color:  #00AB8E;
  }
  
  input#sub:not([disabled]){
      background-color: #fff;
      color: #F68D2E;;
  }
  
  
  #thankyou { display:none;}
  
  #thankyou.success { 
      display: block;
      text-align: center;
  }
  
  #tessellate-page input:focus {
      background-color: #fff !important;;
  }
  
  #tessellate-page textarea:focus {
      background-color: #fff !important;;
  }
  
  #tessellate-page input[type="text"] {
    width: 100%;
    padding: 10px;
    background-color: #30bda6;
    border: 1px solid #fff;
    color: #333;
  }
  
  #tessellate-page input[type="tel"] {
      background-color: #30bda6;
  }
  
  #tessellate-page textarea{
      background-color: #30bda6;
  }
  
  #comments_label {
      margin-top: 8px;
  }
  
  #cap {
      margin-top: 20px;
  }
  
  
  @media (max-width: 656px) {
    label {
      width: 98%;
      height: 70px;
    }
  
     .fa {
      transform: translate(-50%, -45%);
    }
  }
  
  @media (min-width: 656px) {
    .container {
      flex-direction: row;
      flex-wrap: wrap;
      align-self: flex-start;
    }
  
    label {
      margin-bottom: 20px;
  
    }
  
  
  }
  
  label {
      margin-bottom: 48px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="contact_form" class="container form-hide" autocomplete="off" autocomplete="false" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" style="background-color: #00AB8E"&gt;
    &lt;label&gt;First Name
      &lt;span class="error"&gt;Please enter data.&lt;/span&gt;
      &lt;input id="tesFN first_name " maxlength="40" name="first_name" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"&gt;&lt;i class="fa fa-check-circle" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/label&gt;
    &lt;label&gt;Last Name
      &lt;input id="last_name" maxlength="80" name="last_name" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"&gt;&lt;i class="fa fa-check-circle" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/label&gt;
    &lt;label&gt;Email
      &lt;span class="error"&gt;Please enter a valid email address&lt;/span&gt;
      &lt;input id="email" maxlength="80" name="email" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"&gt;&lt;i class="fa fa-times-circle-o" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/label&gt;
    &lt;label&gt;Phone
      &lt;span class="error"&gt;Please enter a valid phone number&lt;/span&gt;              
      &lt;input id="phone" maxlength="80" name="phone" size="20" type="tel" onkeyup="test()" required style="background-color: #30bda6"&gt;&lt;i class="fa fa-check-circle" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/label&gt;
    &lt;label&gt;City
      &lt;input id="city" name="city" maxlength="40" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"&gt;&lt;i class="fa fa-check-circle" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/label&gt;
    &lt;label&gt;State/Province
      &lt;input id="state" maxlength="20" name="state" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"&gt;&lt;i class="fa fa-check-circle" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/label&gt;
    &lt;label id="co"&gt;Company
      &lt;input id="company" name="company" type="text" onkeyup="test()" required style="background-color: #30bda6"&gt;&lt;i class="fa fa-check-circle" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/label&gt;
    &lt;label&gt;Comments
      &lt;textarea id="comments" name="" id="" cols="30" rows="10" onkeyup="test()" required style="background-color: #30bda6"&gt;&lt;/textarea&gt;
      &lt;input id="sub2" type="submit" disabled="disabled" value="SUBMIT"/&gt;
    &lt;/label&gt;
  
      &lt;div&gt;                
          &lt;select  hidden="true" id="00N6A000008yXMN" name="00N6A000008yXMN" title="Product Interest"&gt;
          &lt;option value=""&gt;--None--&lt;/option&gt;
          &lt;option selected="selected" value="Visiant"&gt;Visiant&lt;/option&gt;
          &lt;option  value="Tessellate"&gt;Tessellate&lt;/option&gt;
      &lt;/select&gt;&lt;br&gt;
  
      &lt;select  hidden="true" id="lead_source" name="lead_source"&gt;
          &lt;option value=""&gt;--None--&lt;/option&gt;
          &lt;option value="Internal"&gt;Internal&lt;/option&gt;
      &lt;option value="Trade Show"&gt;Trade Show&lt;/option&gt;
      &lt;option selected="selected" value="Website"&gt;Website&lt;/option&gt;
      &lt;option value="Direct Marketing"&gt;Direct Marketing&lt;/option&gt;
      &lt;option value="Social Media"&gt;Social Media&lt;/option&gt;
      &lt;option value="Other"&gt;Other&lt;/option&gt;
      &lt;/select&gt;&lt;br&gt;
      &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>