Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div class="parent">
<input id="uploadFile" type="file" ng-model="uploadFile">
<div class="child">
<span>select a file</span>
</div>
</div>
CSS
body{
padding: 40px;
}
.parent {
position: relative;
}
.child {
background: orange;
border-radius: 4px;
padding: 10px 20px;
position: absolute;
z-index: 1;
}
input[type="file"]{
background: lime;
padding: 12px 20px;
position: absolute;
opacity: 0;
width: 102px;
z-index: 3;
}
JavaScript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.$watch('uploadFile', function(val) {
if (val) {
console.log(val);
}
});
}