<label for="custom-file-upload" class="filupp">
  <span class="filupp-file-name js-value">Browse Files</span>
  <input type="file" name="attachment-file" value="1" id="custom-file-upload"/>
@import bourbon

@import url(https://fonts.googleapis.com/css?family=Varela+Round)
	box-sizing: border-box

*, *:before, *:after 
	box-sizing: inherit

	background: #181818
	overflow-y: scroll
	position: relative
	font: 1em/1.6 "Varela Round", Arial, sans-serif
	color: #999
	font-weight: 400
	max-width: 25em 
	padding: 1em
	margin: 10% auto

	font-weight: 400

// Filupp styles

$bgColor: #242424
$trimColor: #dd4040
$textColor: #fff 

.filupp > input[type="file"]
	position: absolute
	width: 1px
	height: 1px
	padding: 0
	margin: -1px
	overflow: hidden
	clip: rect(0,0,0,0)
	border: 0

	position: relative
	background: $bgColor
	display: block
	padding: 1em
	font-size: 1em
	width: 100%
	height: 3.5em
	color: $textColor
	cursor: pointer
	box-shadow: 0 1px 3px darken($bgColor,10)

	content: ""
	position: absolute
	top: 1.5em
	right: .75em
	width: 2em
	height: 1.25em
	border: 3px solid $trimColor
	border-top: 0
	text-align: center

	content: "\279c"
	position: absolute
	top: .65em 
	right: .45em
	font-size: 2em
	color: $trimColor
	line-height: 0

	width: 75%
View Compiled
$(document).ready(function() {

  // get the name of uploaded file
		var value = $("input[type='file']").val();

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js