<form method="post" action="data:text/plain, Form submited.">
  <div>New photo:</div>
  <div>
    <input type="file">
  </div>    
  <p><input type="submit" value="Upload"></p>
</form>
<p>This is a demo.</p>
::-webkit-file-upload-button {
  visibility: hidden;        
}

body {
  width:100%;
  max-width:500px;
  overflow:auto;
  margin:auto;
  padding:1em;
}

input{
  border-radius:3px;
  display:block;  
  box-sizing:border-box;
  width:100%;
  padding:.8em;
}

input[type="file"]{
  border:1px solid rgba(0,0,0,0.1);
  background: #f6f6f6;
  padding-left: 3em;
}

input[type="file"]:before{
  content:"Select Photo:";
  background: rgb(144,238,144);
  padding: 1.2em .9em;
  margin-left:-3em;
  font-weight:bold;
}

input[type="submit"]{
  background: rgb(144,238,144);
  border:1px solid rgba(144,238,144,.3);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 -1px rgba(0, 0, 0, 0.1)
}

input[type="submit"]:hover{
  background: hsl(120, 73%, 65%);
}

input[type="submit"]:active{
  background: hsl(120, 65%, 60%);
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 -1px rgba(255, 255, 255, 0.1)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.