How to customize appearance of input type=“file”?

jk
jk
4 Points
2 Posts

Is it possible to change the browse button appearance using CSS?

Total Answered: 3
Total Marked As Answer: 0
Posted On: 19-Feb-2019 07:41

Share:   fb twitter linkedin
Answers
beginer
beginer
64 Points
27 Posts
     

Yes we can customize as following:

Html

<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
  <img src="search.gif" />
</div>
</div>
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
Posted On: 21-Feb-2019 08:01
Smith
Smith
Participant
354 Points
107 Posts
     

You can’t modify much about the input[type=file] control itself but we can use label to customize it. Since a label element correctly paired with an input will activate/focus it.

<label id="file-upload-label" for="file-upload">Browse...</label>
<input type="file" name="file-upload" id="file-upload" />

Here is basic CSS:

label {
   cursor: pointer;
   /* Style as you want, it will become the visible. */
}

#file-upload {
   opacity: 0;
   position: absolute;
   z-index: -1;
   display:none;
}

We can use image icon as:

label {
   cursor: pointer;
    background-image: url('../images/file-upload.png');
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    vertical-align: top;
    display: -webkit-inline-box;
    background-size: contain;
    height: 33px;
}

#file-upload {
   opacity: 0;
   position: absolute;
   z-index: -1;
   display:none;
}
Posted On: 21-Feb-2019 08:18
Stevan
Stevan
24 Points
12 Posts
     

 

The best trick, just use a <label>, hide the <input>, and customize the label.

HTML:

<input type="file" id="input-file">
<label for="input-file" id="label-file">Choose File</label>

CSS:

#input-file
{
  display: none;
}
#label-file
{
  /* Customize your label here */
}
Posted On: 21-Feb-2019 08:41
banner

Blog

Active User (2)

 Log In to Chat