Edit in JSFiddle

<H3>Material input</H3>

<b>Standard:</b><br />

<label class="md_textbox">
  <input type="text" placeholder="Placeholder" />
  <span class="md_textbox__label">Placeholder</span>
  <span class="md_textbox__line"></span>
</label>

<label class="md_textbox">
  <input type="text" placeholder="Input field" value="Default value"/>
  <span class="md_textbox__label">Input field</span>
  <span class="md_textbox__line"></span>
</label>

<br /><b>Disabled:</b><br />

<label class="md_textbox">
  <input disabled type="text" placeholder="Disabled"/>
  <span class="md_textbox__label">Disabled</span>
  <span class="md_textbox__line"></span>
</label>

<label class="md_textbox">
  <input disabled type="text" placeholder="Disabled again" value="but with a value"/>
  <span class="md_textbox__label">Disabled again</span>
  <span class="md_textbox__line"></span>
</label>

<br /><b>Validation:</b><br />

<label class="md_textbox">
  <input pattern="[0-9]*" type="text" placeholder="Invalid" value="Bad text"/>
  <span class="md_textbox__label">Invalid</span>
  <span class="md_textbox__line"></span>
</label>

<label class="md_textbox">
  <input required type="text" placeholder="Required"/>
  <span class="md_textbox__label">Required</span>
  <span class="md_textbox__line"></span>
</label>

<br /><br /><b>Read only:</b><br />

<label class="md_textbox">
  <input readonly type="text" placeholder="Blank" value=""/>
  <span class="md_textbox__label">Blank</span>
  <span class="md_textbox__line"></span>
</label>

<label class="md_textbox">
  <input readonly type="text" placeholder="Read only" value="Can't edit"/>
  <span class="md_textbox__label">Read only</span>
  <span class="md_textbox__line"></span>
</label>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
  background: #F5F5F5;
  font-family: "Open Sans";
}

.md_textbox {
  display: inline-flex;
  position: relative;
  font-family: "Open Sans";
  align-items: center;
  margin: 1.2em 0.6em 0.9em 0.6em;
}

.md_textbox [type=text] {
  width: 200px;
  outline: none;
  border: none;
  border-bottom: 1px solid #BDBDBD;
  background: rgba(0, 0, 0, 0);
}

.md_textbox [type=text]::placeholder {
  color: rgba(0, 0, 0, 0)
}

.md_textbox .md_textbox__label,
.md_textbox .md_textbox__line,
.md_textbox .md_textbox__line::before {
  position: absolute;
  transition: transform 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
  left: 0;
}

.md_textbox .md_textbox__line {
  bottom: 0;
  height: 2px;
  width: 100%;
  transform: scale(0, 1);
  background: #00897B;
}

.md_textbox .md_textbox__label {
  transform-origin: 0 50%;
  cursor: text;
  color: #424242;
}

.md_textbox .md_textbox__line::before {
  margin-top: 2px;
  font-size: 0.7em;
}

/* Has text */

.md_textbox [type=text]:not(:placeholder-shown)~.md_textbox__label {
  transform: translateY(-1em) scale(0.8);
  font-weight: bold;
}

/* Focus */

.md_textbox [type=text]:focus~.md_textbox__line {
  transform: scale(1);
}

.md_textbox [type=text]:focus~.md_textbox__label {
  transform: translateY(-1em) scale(0.8);
  font-weight: bold;
  color: #00897B;
}

/* Disabled */

.md_textbox [type=text]:disabled {
  cursor: not-allowed;
  border: none;
  background: #BDBDBD;
  opacity: 0.6;
}

.md_textbox [type=text]:disabled~.md_textbox__label {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Read only */

.md_textbox [type=text]:read-only {
  border: none;
}

.md_textbox [type=text]:read-only~.md_textbox__line {
  transform: scale(0, 1);
}

.md_textbox [type=text]:read-only:placeholder-shown~.md_textbox__label {
  transform: translateY(0) scale(1);
}

/* Invalid */

.md_textbox [type=text]:invalid~.md_textbox__line {
  background: #B00020;
  transform: scale(1);
}

.md_textbox [type=text]:invalid~.md_textbox__line::before {
  content: 'Invalid input';
  color: #B00020;
}

.md_textbox [type=text]:invalid~.md_textbox__label {
  color: #B00020;
}

/* required */

.md_textbox [type=text]:invalid:required~.md_textbox__line::before {
  content: '*Required';
  color: #424242;
}

.md_textbox [type=text]:required:placeholder-shown:not(:focus)~.md_textbox__line {
  background: #BDBDBD;
}

.md_textbox [type=text]:required:placeholder-shown:not(:focus)~.md_textbox__label {
  color: #424242;
}