Generated by SassMeister.com.

SassMeister-input-HTML.html

<nav>
  <div class="menu"></div>
  <span class="title">Pure CSS Material Design</span>
</nav>

<table>
<tr>
  <td style="width:200px">
    <input type="text" placeholder="Hint text" /><br/>
    <input type="text" class="error" placeholder="Error" /><br/>
    <input type="text" disabled value="Input text" />
    <br />
    <br/>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </td>
  <td style="width:200px">
    <label><input type="checkbox" />Checkbox</label><br/>
    <label><input type="checkbox" checked />Checkbox</label><br/>
    <label><input type="checkbox" disabled />Checkbox</label><br/>
    <label><input type="checkbox" disabled checked />Checkbox</label>
    <br/>
    <br/>
    <label><input type="radio" name="r"/>Radio 1</label><br/>
    <label><input type="radio" name="r" checked />Radio 2</label><br/>
    <label><input type="radio" disabled />Radio 3</label><br/>
    <label><input type="radio" disabled checked />Radio 4</label>
  </td>
  <td style="width:200px">
    <input type="range" />
    <br/>
    <br/>
    <div class="button-wrapper">
      <button>Submit</button>
      <div class="circle"></div>
    </div>
  </td>
</tr>
</table>

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

@import url(https://fonts.googleapis.com/css?family=Roboto);

/* Light Theme */
$text-color: black;
$background-color: white;
$primary-color: #2196F3;
$error-color: red;
$disabled-color: #bdbdbd;
$inverse-color: white;

/* Dark Theme */
/*$text-color: #eeeeee;
$background-color: #303030;
$primary-color: #1e90ff;
$error-color: red;
$disabled-color: #616161;
$inverse-color: white;
*/

html, body {
  /*background-color: $background-color;*/
  color: $text-color;
}

html, body, input, textarea, keygen, select, button {
  font-family: 'Roboto', sans-serif;
}

nav {
  background-color: $primary-color;
  box-shadow:1px 1px 5px rgba(0,0,0,0.5);
  height: 48px;
  line-height: 48px;  

  z-index: 1;
  text-align: left;
  top: 0px;
  width: 100%;

  color: $inverse-color;
  font-size: 1.2em;
  font-weight: 400;
  padding-bottom: 5px;
}
nav .menu {
  position: absolute;
  cursor: pointer;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/173024/menu_smartphone_btn2.png) no-repeat;
  top: 14px;
  left: 16px;
  width: 32px; height:32px;
}
nav .title {
  margin-left: 48px;
}


::-webkit-input-placeholder { font-family: 'Roboto', sans-serif; color: $disabled-color; }
::-moz-placeholder { font-family: 'Roboto', sans-serif; color: $disabled-color; } /* firefox 19+ */
:-ms-input-placeholder { font-family: 'Roboto', sans-serif; color: $disabled-color; } /* ie */
input:-moz-placeholder { font-family: 'Roboto', sans-serif; color: $disabled-color; }

/* Textbox */
input[type=text], select { /* + Dropdown */
    border: 0;
    margin: 0.5em 0;
    padding-bottom: 0.5em;
    border-bottom: 2px solid $disabled-color;
    font-size: 1em;
    color: $text-color;
    background-color: transparent;
    outline: none;
}
select { color: $disabled-color; }
select:focus { color: $text-color; }

input[type=text].error{
    border-bottom: 2px solid $error-color;
}
input[type=text]:active, input[type=text]:focus{
    border-bottom: 2px solid $primary-color;
}
input[type=text]:disabled{
    background-color: transparent;
    border-bottom: 1px dotted $disabled-color;
    color: $disabled-color;
}

/* Checkbox */
input[type=checkbox] {
  margin-right: 10px;
}
input[type=checkbox]::before {
    width: 1em; 
    height: 1em; display: inline-block;
    line-height: 1em;
    text-align: center;
    border: 2px solid $text-color;
    border-radius: 4px;
    color: $inverse-color;    
    content:''; 
    background-color: $background-color;
}
input[type=checkbox]:checked::before {
    content:'\2713'; 
    border: 2px solid $primary-color;
    background-color: $primary-color;
}
input[type=checkbox]:disabled::before {
    border-color: $disabled-color;
}
input[type=checkbox]:checked:disabled::before {
    background-color: $disabled-color;
}

/* Radio */
input[type=radio] {
  margin-right: 10px;
}
input[type=radio]::before {
    width: 1em; 
    height: 1em; display: inline-block;
    line-height: 1em;
    text-align: center;
    border: 2px solid $text-color;
    border-radius: 1em;
    content:''; 
    background-color: $background-color;
    -webkit-text-stroke-width: 0.3em;
    -webkit-text-stroke-color:  $primary-color;
}
input[type=radio]:checked::before {
    content:'\2022'; 
    border: 2px solid $primary-color;
    color: $primary-color;
}
input[type=radio]:disabled::before {
    border-color: $disabled-color;
    color: $disabled-color;
    -webkit-text-stroke-color:  $disabled-color;
}

/* Range */
input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -0.4em;
  height: 1em;
  width: 1em;
  border-radius: 1em;
  background: $primary-color;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  height: 1em;
  width: 1em;
  border-radius: 1em;
  background: $primary-color;
  cursor: pointer;
}
input[type=range]::-ms-thumb {
  height: 1em;
  width: 1em;
  border-radius: 1em;
  background: $primary-color;
  cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background-color: $disabled-color;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background-color: $primary-color;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background-color: $disabled-color;
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
  height: 3px;
  background-color: $disabled-color;
}
input[type=range]::-ms-fill-lower {
  background-color: $disabled-color;
}
input[type=range]::-ms-fill-upper {
  background-color: $disabled-color;
}
input[type=range]:focus::-ms-fill-lower {
  background-color: $primary-color;
}
input[type=range]:focus::-ms-fill-upper {
  background-color: $primary-color;
}

/* Button - credits to Wifeo (http://codepen.io/wifeo/pen/gsDJx)*/
button
{
  border: none;
  position: absolute;
  font-weight: 300;
  font-size: 1em;
  text-transform: uppercase;
  background-color: $primary-color;
  color: $inverse-color;
  cursor: pointer;  
  height: 100%;
  width: 100%;
}
.button-wrapper
{
  width: 100px;
  height: 40px;
  background-color: #00bcd4;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow:2px 2px 2px 0px rgba(0,0,0,0.5);
}
.button-wrapper:active .circle
{
  cursor: pointer; 
  -webkit-animation:oblik 0.2s ease-in;
  -webkit-transform-origin: 50% 50%;
  -moz-animation:oblik 0.2s ease-in;
  -moz-transform-origin: 50% 50%;
  -ms-animation:oblik 0.2s ease-in;
  -ms-transform-origin: 50% 50%;
  animation:oblik 0.2s ease-in;
  transform-origin: 50% 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

@-webkit-keyframes oblik {
  0% {opacity:1;-webkit-transform:scale(0);}
  100% {opacity:0;-webkit-transform:scale(5);background-color: black;}   
}
@-moz-keyframes oblik {
  0% {opacity:1;-moz-transform:scale(0);}
  100% {opacity:0;-moz-transform:scale(5);background-color: black;}   
}
@-ms-keyframes oblik {
  0% {opacity:1;-ms-transform:scale(0);}
  100% {opacity:0;-ms-transform:scale(5);background-color: black;}   
}
@keyframes oblik {
  0% {opacity:1;transform:scale(0);}
  100% {opacity:0;transform:scale(5);background-color: black;}   
}

SassMeister-output.css

@import url(https://fonts.googleapis.com/css?family=Roboto);
/* Light Theme */
/* Dark Theme */
/*$text-color: #eeeeee;
$background-color: #303030;
$primary-color: #1e90ff;
$error-color: red;
$disabled-color: #616161;
$inverse-color: white;
*/
html, body {
  /*background-color: $background-color;*/
  color: black;
}

html, body, input, textarea, keygen, select, button {
  font-family: 'Roboto', sans-serif;
}

nav {
  background-color: #2196F3;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  height: 48px;
  line-height: 48px;
  z-index: 1;
  text-align: left;
  top: 0px;
  width: 100%;
  color: white;
  font-size: 1.2em;
  font-weight: 400;
  padding-bottom: 5px;
}

nav .menu {
  position: absolute;
  cursor: pointer;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/173024/menu_smartphone_btn2.png) no-repeat;
  top: 14px;
  left: 16px;
  width: 32px;
  height: 32px;
}

nav .title {
  margin-left: 48px;
}

::-webkit-input-placeholder {
  font-family: 'Roboto', sans-serif;
  color: #bdbdbd;
}

::-moz-placeholder {
  font-family: 'Roboto', sans-serif;
  color: #bdbdbd;
}

/* firefox 19+ */
:-ms-input-placeholder {
  font-family: 'Roboto', sans-serif;
  color: #bdbdbd;
}

/* ie */
input:-moz-placeholder {
  font-family: 'Roboto', sans-serif;
  color: #bdbdbd;
}

/* Textbox */
input[type=text], select {
  /* + Dropdown */
  border: 0;
  margin: 0.5em 0;
  padding-bottom: 0.5em;
  border-bottom: 2px solid #bdbdbd;
  font-size: 1em;
  color: black;
  background-color: transparent;
  outline: none;
}

select {
  color: #bdbdbd;
}

select:focus {
  color: black;
}

input[type=text].error {
  border-bottom: 2px solid red;
}

input[type=text]:active, input[type=text]:focus {
  border-bottom: 2px solid #2196F3;
}

input[type=text]:disabled {
  background-color: transparent;
  border-bottom: 1px dotted #bdbdbd;
  color: #bdbdbd;
}

/* Checkbox */
input[type=checkbox] {
  margin-right: 10px;
}

input[type=checkbox]::before {
  width: 1em;
  height: 1em;
  display: inline-block;
  line-height: 1em;
  text-align: center;
  border: 2px solid black;
  border-radius: 4px;
  color: white;
  content: '';
  background-color: white;
}

input[type=checkbox]:checked::before {
  content: '\2713';
  border: 2px solid #2196F3;
  background-color: #2196F3;
}

input[type=checkbox]:disabled::before {
  border-color: #bdbdbd;
}

input[type=checkbox]:checked:disabled::before {
  background-color: #bdbdbd;
}

/* Radio */
input[type=radio] {
  margin-right: 10px;
}

input[type=radio]::before {
  width: 1em;
  height: 1em;
  display: inline-block;
  line-height: 1em;
  text-align: center;
  border: 2px solid black;
  border-radius: 1em;
  content: '';
  background-color: white;
  -webkit-text-stroke-width: 0.3em;
  -webkit-text-stroke-color: #2196F3;
}

input[type=radio]:checked::before {
  content: '\2022';
  border: 2px solid #2196F3;
  color: #2196F3;
}

input[type=radio]:disabled::before {
  border-color: #bdbdbd;
  color: #bdbdbd;
  -webkit-text-stroke-color: #bdbdbd;
}

/* Range */
input[type=range] {
  -webkit-appearance: none;
  /* Hides the slider so that custom slider can be made */
  width: 100%;
  /* Specific width is required for Firefox. */
}

input[type=range]:focus {
  outline: none;
  /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -0.4em;
  height: 1em;
  width: 1em;
  border-radius: 1em;
  background: #2196F3;
  cursor: pointer;
}

input[type=range]::-moz-range-thumb {
  height: 1em;
  width: 1em;
  border-radius: 1em;
  background: #2196F3;
  cursor: pointer;
}

input[type=range]::-ms-thumb {
  height: 1em;
  width: 1em;
  border-radius: 1em;
  background: #2196F3;
  cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background-color: #bdbdbd;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background-color: #2196F3;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background-color: #bdbdbd;
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
  height: 3px;
  background-color: #bdbdbd;
}

input[type=range]::-ms-fill-lower {
  background-color: #bdbdbd;
}

input[type=range]::-ms-fill-upper {
  background-color: #bdbdbd;
}

input[type=range]:focus::-ms-fill-lower {
  background-color: #2196F3;
}

input[type=range]:focus::-ms-fill-upper {
  background-color: #2196F3;
}

/* Button - credits to Wifeo (http://codepen.io/wifeo/pen/gsDJx)*/
button {
  border: none;
  position: absolute;
  font-weight: 300;
  font-size: 1em;
  text-transform: uppercase;
  background-color: #2196F3;
  color: white;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

.button-wrapper {
  width: 100px;
  height: 40px;
  background-color: #00bcd4;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.5);
}

.button-wrapper:active .circle {
  cursor: pointer;
  -webkit-animation: oblik 0.2s ease-in;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: oblik 0.2s ease-in;
  -moz-transform-origin: 50% 50%;
  -ms-animation: oblik 0.2s ease-in;
  -ms-transform-origin: 50% 50%;
  animation: oblik 0.2s ease-in;
  transform-origin: 50% 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

@-webkit-keyframes oblik {
  0% {
    opacity: 1;
    -webkit-transform: scale(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(5);
    background-color: black;
  }
}

@-moz-keyframes oblik {
  0% {
    opacity: 1;
    -moz-transform: scale(0);
  }
  100% {
    opacity: 0;
    -moz-transform: scale(5);
    background-color: black;
  }
}

@-ms-keyframes oblik {
  0% {
    opacity: 1;
    -ms-transform: scale(0);
  }
  100% {
    opacity: 0;
    -ms-transform: scale(5);
    background-color: black;
  }
}

@keyframes oblik {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  100% {
    opacity: 0;
    transform: scale(5);
    background-color: black;
  }
}

SassMeister-rendered.html

<nav>
  <div class="menu"></div>
  <span class="title">Pure CSS Material Design</span>
</nav>

<table>
<tr>
  <td style="width:200px">
    <input type="text" placeholder="Hint text" /><br/>
    <input type="text" class="error" placeholder="Error" /><br/>
    <input type="text" disabled value="Input text" />
    <br />
    <br/>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </td>
  <td style="width:200px">
    <label><input type="checkbox" />Checkbox</label><br/>
    <label><input type="checkbox" checked />Checkbox</label><br/>
    <label><input type="checkbox" disabled />Checkbox</label><br/>
    <label><input type="checkbox" disabled checked />Checkbox</label>
    <br/>
    <br/>
    <label><input type="radio" name="r"/>Radio 1</label><br/>
    <label><input type="radio" name="r" checked />Radio 2</label><br/>
    <label><input type="radio" disabled />Radio 3</label><br/>
    <label><input type="radio" disabled checked />Radio 4</label>
  </td>
  <td style="width:200px">
    <input type="range" />
    <br/>
    <br/>
    <div class="button-wrapper">
      <button>Submit</button>
      <div class="circle"></div>
    </div>
  </td>
</tr>
</table>