A Pen by Geoffrey Crofte.

Flat-UI---Custom-input:file.markdown

Flat UI - Custom input:file

Just a test of input:file with custom styles.

A Pen by Geoffrey Crofte on CodePen.

License.

index.html

<h1>Flat UI - Custom Input:file</h1>
<h2>With only CSS</h2>

<form action="#">
  <p class="file">
    <input type="file" name="file" id="file" />
    <label for="file">Upload your image</label>
  </p>
</form>

<p class="txtcenter">It's just a test, not really usable.<br />Works on IE &gt; 8 and modern browsers</p>
<p class="txtcenter copy">by <a href="http://twitter.com/geoffrey_crofte">@geoffrey_crofte</a><br />see also <a href="http://codepen.io/CreativeJuiz/pen/zqKtp">CSS custom Checkboxes</a></p>

script.js

// no js

style.css

.file {
  position: relative;
}
.file label {
  background: #39D2B4;
  padding: 5px 20px;
  color: #fff;
  font-weight: bold;
  font-size: .9em;
  transition: all .4s;
}
.file input {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  opacity: 0.01;
  cursor: pointer;
}
.file input:hover + label,
.file input:focus + label {
  background: #34495E;
  color: #39D2B4;
}



/* Useless styles, just for demo styles */

body {
  font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
  color: #7F8C9A;
  background: #FCFDFD;
}
h1, h2 {
  margin-bottom: 5px;
  font-weight: normal;
  text-align: center;
  color:#aaa;
}
h2 {
  margin: 5px 0 2em;
  color: #1ABC9C;
}
form {
  width: 225px;
  margin: 0 auto;
  text-align:center;
}
h2 + P {
  text-align: center;
}
.txtcenter {
  margin-top: 4em;
  font-size: .9em;
  text-align: center;
  color: #aaa;
}
.copy {
 margin-top: 2em; 
}
.copy a {
 text-decoration: none;
 color: #1ABC9C;
}