Input tag customization - css

Question

Ho to all,
I got this problem :
<input type ="file" name ="fileUpload">
I Made a file input that by default dispalys "choose a file".
I don't really like it so i want to make it like a Button the problem Is that when i try to surround it with Button tag or span with a Button property
I would like to know if i can hide the "choose a file" Making the file input tag like a single Button
Thanks for your future answers
Have a nice day
Luca

Answer 1

<style>
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.upload {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
<div class="fileUpload">
<span>Upload</span>
<input type="file" class="upload" />
</div>

Answer 2

Just wrap it around a span and give color:white to span. For example like this http://jsfiddle.net/25bju0a4/

Answer 3

<style type="text/css">
.button {
width: 124px;
height: 27px;
}
.button::-webkit-file-upload-button {
visibility: hidden;
}
.button:before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #F9F9F9, #E3E3E3);
background: -moz-linear-gradient(top, #F9F9F9, #E3E3E3);
background: -ms-linear-gradient(top, #F9F9F9, #E3E3E3);
background: -o-linear-gradient(top, #F9F9F9, #E3E3E3);
background: linear-gradient(top, #F9F9F9, #E3E3E3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.button:hover:before {
border-color: black;
}
.button:active:before {
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#E3E3E3), to(#F9F9F9));
background: -webkit-linear-gradient(top, #E3E3E3, #F9F9F9);
background: -moz-linear-gradient(top, #E3E3E3, #F9F9F9);
background: -ms-linear-gradient(top, #E3E3E3, #F9F9F9);
background: -o-linear-gradient(top, #E3E3E3, #F9F9F9);
background: linear-gradient(top, #E3E3E3, #F9F9F9);
}
</style>
<input type ="file" name ="fileUpload" class=button>