A Pen by Johan Stenehall.

A-Pen-by-Johan-Stenehall.markdown

A Pen by Johan Stenehall

A Pen by Johan Stenehall on CodePen.

License.

index.html

  <form action="" method="post">

    <ul>
      <li>
        <label>
          <input type="text" name="name" value="" placeholder="Your name is?">
        </label>
      </li>

      <li>
        <label>
          <input type="text" name="email" value="" placeholder="Your E-mail is?">
        </label>
      </li>

      <li>
        <label>
          <input type="text" name="phone" value="" placeholder="What is your phone number?">
        </label>
      </li>

      <li>
        <label>
          <input type="text" name="company" value="" placeholder="What is your company called?">
        </label>
      </li>

      <li class="message">
        <label>
          <textarea name="message" placeholder="I love your products!"></textarea>
        </label>
      </li>
    </ul>

    <input href="#dialog" name="modal" id="submit" placeholder="SUBMIT" class="submitgray" type="submit">
  </form>

script.js

window.onload = function() {
  var inputs = Array.prototype.slice.call(document.getElementsByTagName('input'));
  var textareas = Array.prototype.slice.call(document.getElementsByTagName('textarea'));
  var fields = inputs.concat(textareas);

  for (var i in fields) {

    var span = document.createElement('span');
    span.innerHTML = fields[i].placeholder;
    fields[i].parentNode.appendChild(span);

    fields[i].onblur = function(e) {
      if (e.srcElement.value !== "") {
        e.srcElement.className = "value";
      } else {
        e.srcElement.className = "";
      }
    };
  }
}

style.css

body {
  background: #eee;
}
form {
  max-width: 500px;
  width: 60%;
  margin: 50px auto;
  background: #ddd;
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 30px;
  overflow: hidden;
  font-family: 'Lucida Grande';
}
ul {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
li {
  float: left;
  width: 50%;
  box-sizing: border-box;
  padding: 20px 10px;
  list-style: none;
}
input[type=text],
textarea {
  width: 100%;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  border: 1px dashed black;
  border-width: 0 0 1px;
  background: transparent;
  font-size: 0.8em;
  outline: none;
}
textarea {
  height: 100px;
}
label {
  display: block;
  position: relative;
}
input + span,
textarea + span {
  position: absolute;
  top: 0.7em;
  color: transparent;
  font-size: 0.8em;
  left: 10px;
  transition: color 1s, top 1s, font-size 1s;
}
input:focus,
textarea:focus {
  border-color: #fff;
}
input:focus + span,
input.value + span,
textarea:focus + span,
textarea.value + span {
  color: #000;
  top: -1.5em;
  font-size: 0.6em;
}
::-webkit-input-placeholder {
  transition: color 1s;
  color: #333;
}
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
  color: transparent;
}
input[type="submit"] {
  width: 200px;
  margin: 0 auto;
  display: block;
  cursor: pointer;
}
.message {
  width: 100%;
}