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>