diff --git a/bolt.css b/bolt.css
index e25d912..6b7ce4f 100644
--- a/bolt.css
+++ b/bolt.css
@@ -438,6 +438,15 @@ input[type="color"] {
   border-radius: 3px;
 }
 
+input[type="file"]::file-selector-button {
+  color: var(--text);
+  background-color: var(--background-main);
+  padding: 6px 15px 6px 15px;
+  border: 1px solid transparent;
+  border-radius: var(--border-radius);
+  margin-right: 0.5rem;;
+}
+
 textarea {
   font-family: inherit;
   font-size: 1em;
diff --git a/index.html b/index.html
index 39b9c85..b0cfd02 100644
--- a/index.html
+++ b/index.html
@@ -336,6 +336,10 @@ <h3 class="demo-header">form</h3>
         <label for="date"> Date </label>
         <input type="date" id="date" name="date" value="2006-01-02" />
       </div>
+      <div class="form-example">
+        <label for="file"> Attachment </label>
+        <input type="file" id="file" name="file"/>
+      </div>
       <div class="form-example">
         <label for="surprise">
           <input type="checkbox" id="surprise" name="surprise" value="" />