<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"/>
</label>

@import bourbon

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

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

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

h2 
	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

.filupp 
	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)

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

.filupp:after
	content: "\279c"
	+transform(rotate(-90deg))
	position: absolute
	top: .65em 
	right: .45em
	font-size: 2em
	color: $trimColor
	line-height: 0

.filupp-file-name
	width: 75%
	+ellipsis(100%)

$(document).ready(function() {

  // get the name of uploaded file
	$('input[type="file"]').change(function(){
		var value = $("input[type='file']").val();
		$('.js-value').text(value);
	});

});