diff --git a/index.html b/index.html
index 9e47d684..5364074d 100644
--- a/index.html
+++ b/index.html
@@ -1285,6 +1285,13 @@
                                             </div>
                                         </div>
                                     </div>
+                                    <div class="form-group">
+                                        <label for="inputFile" class="col-lg-2 control-label">File</label>
+                                        <div class="col-lg-10">
+                                            <input type="text" readonly class="form-control floating-label" placeholder="Browse...">
+                                            <input type="file" id="inputFile" multiple>
+                                        </div>
+                                    </div>
                                     <div class="form-group">
                                         <label for="textArea" class="col-lg-2 control-label">Textarea</label>
                                         <div class="col-lg-10">
diff --git a/material/material.css b/material/material.css
index a5ce7ffb..d87a7a94 100644
--- a/material/material.css
+++ b/material/material.css
@@ -1,5 +1,5 @@
 /* Generated by less 1.7.5 */
-@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);
+@import url(//fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);
 @-webkit-keyframes input-highlight {
   0% {
     left: 20%;
@@ -427,11 +427,14 @@ h6,
 .checkbox label span {
   display: block;
   position: absolute;
-  left: 10px;
+  left: 0px;
   -webkit-transition-duration: 0.2s;
           transition-duration: 0.2s;
 }
-.checkbox label .ripple {
+.checkbox label .check:after {
+  display: block;
+  position: absolute;
+  content: "";
   background-color: rgba(0, 0, 0, 0.84);
   left: -5px;
   top: -15px;
@@ -442,7 +445,9 @@ h6,
   opacity: 0;
   margin: 0;
 }
-.checkbox label .check {
+.checkbox label .check:before {
+  display: block;
+  content: "";
   border: 2px solid rgba(0, 0, 0, 0.84);
   height: 20px;
   width: 20px;
@@ -522,7 +527,7 @@ h6,
 .checkbox input[type=checkbox] {
   display: none;
 }
-.checkbox input[type=checkbox] ~ .check {
+.checkbox input[type=checkbox] ~ .check:before {
   position: absolute;
   top: 2px;
   left: 11px;
@@ -534,95 +539,98 @@ h6,
   -ms-animation: uncheck 300ms ease-out forwards;
   animation: uncheck 300ms ease-out forwards;
 }
-.checkbox input[type=checkbox]:checked ~ .check {
+.checkbox input[type=checkbox]:checked ~ .check:before {
   -webkit-animation: check 300ms ease-out forwards;
   -ms-animation: check 300ms ease-out forwards;
   animation: check 300ms ease-out forwards;
 }
-.checkbox input[type=checkbox]:not(:checked) ~ .ripple {
+.checkbox input[type=checkbox]:not(:checked) ~ .check:after {
   -webkit-animation: rippleOff 500ms;
   -ms-animation: rippleOff 500ms;
   animation: rippleOff 500ms;
 }
-.checkbox input[type=checkbox]:checked ~ .ripple {
+.checkbox input[type=checkbox]:checked ~ .check:after {
   -webkit-animation: rippleOn 500ms;
   -ms-animation: rippleOn 500ms;
   animation: rippleOn 500ms;
 }
-.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check {
+.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before {
   opacity: 0.5;
 }
-.checkbox input[type=checkbox][disabled] ~ .ripple {
+.checkbox input[type=checkbox][disabled] ~ .check:after {
   background-color: rgba(0, 0, 0, 0.84);
+  -webkit-transform: rotate(-45deg);
+      -ms-transform: rotate(-45deg);
+          transform: rotate(-45deg);
 }
-.checkbox input[type=checkbox]:checked ~ .ripple,
-.checkbox-default input[type=checkbox]:checked ~ .ripple {
+.checkbox input[type=checkbox]:checked ~ .check:after,
+.checkbox-default input[type=checkbox]:checked ~ .check:after {
   background-color: #0f9d58;
 }
-.checkbox-primary input[type=checkbox]:checked ~ .ripple {
+.checkbox-primary input[type=checkbox]:checked ~ .check:after {
   background-color: #4285f4;
 }
-.checkbox-success input[type=checkbox]:checked ~ .ripple {
+.checkbox-success input[type=checkbox]:checked ~ .check:after {
   background-color: #0f9d58;
 }
-.checkbox-info input[type=checkbox]:checked ~ .ripple {
+.checkbox-info input[type=checkbox]:checked ~ .check:after {
   background-color: #03a9f4;
 }
-.checkbox-warning input[type=checkbox]:checked ~ .ripple {
+.checkbox-warning input[type=checkbox]:checked ~ .check:after {
   background-color: #ff5722;
 }
-.checkbox-danger input[type=checkbox]:checked ~ .ripple {
+.checkbox-danger input[type=checkbox]:checked ~ .check:after {
   background-color: #f44336;
 }
-.checkbox-material-red input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-red input[type=checkbox]:checked ~ .check:after {
   background-color: #f44336;
 }
-.checkbox-material-pink input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-pink input[type=checkbox]:checked ~ .check:after {
   background-color: #e91e63;
 }
-.checkbox-material-purple input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-purple input[type=checkbox]:checked ~ .check:after {
   background-color: #9c27b0;
 }
-.checkbox-material-deeppurple input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check:after {
   background-color: #673ab7;
 }
-.checkbox-material-indigo input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-indigo input[type=checkbox]:checked ~ .check:after {
   background-color: #3f51b5;
 }
-.checkbox-material-lightblue input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:after {
   background-color: #03a9f4;
 }
-.checkbox-material-cyan input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-cyan input[type=checkbox]:checked ~ .check:after {
   background-color: #00bcd4;
 }
-.checkbox-material-teal input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-teal input[type=checkbox]:checked ~ .check:after {
   background-color: #009688;
 }
-.checkbox-material-lightgreen input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check:after {
   background-color: #8bc34a;
 }
-.checkbox-material-lime input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-lime input[type=checkbox]:checked ~ .check:after {
   background-color: #cddc39;
 }
-.checkbox-material-lightyellow input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check:after {
   background-color: #ffeb3b;
 }
-.checkbox-material-orange input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-orange input[type=checkbox]:checked ~ .check:after {
   background-color: #ff9800;
 }
-.checkbox-material-deeporange input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-deeporange input[type=checkbox]:checked ~ .check:after {
   background-color: #ff5722;
 }
-.checkbox-material-grey input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-grey input[type=checkbox]:checked ~ .check:after {
   background-color: #9e9e9e;
 }
-.checkbox-material-bluegrey input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check:after {
   background-color: #607d8b;
 }
-.checkbox-material-brown input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-brown input[type=checkbox]:checked ~ .check:after {
   background-color: #795548;
 }
-.checkbox-material-lightgrey input[type=checkbox]:checked ~ .ripple {
+.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after {
   background-color: #ececec;
 }
 @-webkit-keyframes uncheck {
@@ -1175,7 +1183,7 @@ select[multiple].form-control.focus {
   height: 18px;
   width: 100px;
   margin-top: -1px;
-  top: 25%;
+  top: 7px;
   left: 0;
   pointer-events: none;
   opacity: 0.9;
@@ -1665,6 +1673,17 @@ select.form-control.focus {
     opacity: 0;
   }
 }
+.form-control-wrapper input[type=file] {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+}
 legend {
   border-bottom: 0;
 }
@@ -2377,6 +2396,40 @@ fieldset[disabled] .navbar .btn-link:focus {
 .navbar-inverse {
   background-color: #3f51b5;
 }
+.navbar-material-white {
+  background-color: #FFF;
+}
+.navbar-material-white .navbar-brand,
+.navbar-material-white .navbar-brand:hover,
+.navbar-material-white .navbar-brand:focus {
+  color: rgba(0, 0, 0, 0.84);
+}
+.navbar-material-white .navbar-nav > li > a {
+  color: rgba(0, 0, 0, 0.84);
+}
+.navbar-material-white .navbar-nav > li > a:hover,
+.navbar-material-white .navbar-nav > li > a:focus {
+  color: rgba(0, 0, 0, 0.84);
+  background-color: transparent;
+}
+.navbar-material-white .navbar-nav > .active > a,
+.navbar-material-white .navbar-nav > .active > a:hover,
+.navbar-material-white .navbar-nav > .active > a:focus {
+  color: rgba(0, 0, 0, 0.84);
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.navbar-material-white .navbar-nav > .disabled > a,
+.navbar-material-white .navbar-nav > .disabled > a:hover,
+.navbar-material-white .navbar-nav > .disabled > a:focus {
+  color: rgba(0, 0, 0, 0.84);
+  background-color: transparent;
+}
+.navbar-material-white .navbar-nav > .open > a,
+.navbar-material-white .navbar-nav > .open > a:hover,
+.navbar-material-white .navbar-nav > .open > a:focus {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: rgba(0, 0, 0, 0.84);
+}
 .dropdown-menu {
   border: 0;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
diff --git a/material/material.js b/material/material.js
index e7038784..5e38833a 100644
--- a/material/material.js
+++ b/material/material.js
@@ -5,10 +5,10 @@ $(function (){
     ripples.init(".btn:not(.btn-link), .navbar a, .nav-tabs a, .withripple");
 
     // Add fake-checkbox to material checkboxes
-    $(".checkbox label input").after("<span class=ripple></span><span class=check></span>");
+    $(".checkbox > label > input").after("<span class=check></span>");
 
     // Add fake-radio to material radios
-    $(".radio label input").after("<span class=ripple></span><span class=circle></span><span class=check></span>");
+    $(".radio > label > input").after("<span class=ripple></span><span class=circle></span><span class=check></span>");
 
     // Add elements for material inputs
     $("input.form-control, textarea.form-control, select.form-control").each( function() {
@@ -22,6 +22,12 @@ $(function (){
         if ($(this).val() === "") {
             $(this).addClass("empty");
         }
+
+        if ($(this).parent().next().is("[type=file]")) {
+            $(this).parent().addClass("fileinput");
+            var $input = $(this).parent().next().detach();
+            $(this).after($input);
+        }
     });
 
     $(document).on("keyup change", ".form-control", function() {
@@ -31,7 +37,28 @@ $(function (){
             $(this).addClass("empty");
         }
     });
-    $(document).on("keydown", ".form-control", function() {
+    $(document).on("keydown change", ".form-control", function() {
         $(this).removeClass("empty");
     });
+    $(document)
+    .on("focus", ".form-control-wrapper.fileinput", function() {
+        $(this).find("input").addClass("focus");
+    })
+    .on("blur", ".form-control-wrapper.fileinput", function() {
+        $(this).find("input").removeClass("focus");
+    })
+    .on("change", ".form-control-wrapper.fileinput [type=file]", function() {
+        var value = "";
+        $.each($(this)[0].files, function(i, file) {
+            console.log(file);
+            value += file.name + ", ";
+        });
+        value = value.substring(0, value.length - 2);
+        if (value) {
+            $(this).prev().removeClass("empty");
+        } else {
+            $(this).prev().addClass("empty");
+        }
+        $(this).prev().val(value);
+    });
 });