Input tag customization

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

Possible duplicate:http://stackoverflow.com/questions/5813344/how-to-customize-input-type-file — jean, Mar 02 '15 at 12:54

score 0 · Answer 1 · answered Mar 02 '15 at 12:54

<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>

score 0 · Answer 2 · answered Mar 02 '15 at 12:55

0

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

answered Mar 02 '15 at 12:55

YourFriend

434
4
7

score 0 · Answer 3 · answered Mar 02 '15 at 13:08

<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>

Input tag customization

3 Answers3