CSS for input type file

      No Comments on CSS for input type file

CSS for input type file – there is no possible way to style a input type file element using CSS applied directly on it. To style an input type file we need to use a trick.

To style input type file, we overlap the input element with the label element and apply css to that. Setting opacity of input type file hides the input but does not stops its functionality. If we use any other property, it will cause the input type file to stop working.

CSS for input type file

CSS for input type file
CSS for input type file

HTML:

<div class="img-container">
  <input type="file" name="in1" class="img-input" id="in1" onchange="label_value();"/>
  <label for="in1" class="input-label" id="label1"><span class="glyphicon glyphicon-upload"></span>Choose a file</label>
</div>

CSS:

.img-container
{
  position:relative;
  width:400px;
}
.img-input
{
  position:absolute;
  top:10px;
  left:10px;
  z-index:3;
  opacity:0;
  width:100%;
  height:70px;
}
.input-label
{
  position:absolute;
  top:10px;
  left:10px;
  padding:15px 30px;
  background:#009999;
  color:#fff;
  font-size:20px;
  font-family:'arial';
}
.input-label .glyphicon
{
  margin:0px 5px;
}

JS

function label_value()
{
var src=document.getElementById(‘in1’).value;
document.getElementById(‘label1’).innerHTML=
“+src;
}

Demo

See the Pen Styling input type file by scanfcode (@scanfcode) on CodePen.

Summary
CSS for input type file
Article Name
CSS for input type file
Description
CSS for input type file - there is no possible way to style a input type file element using CSS applied directly on it. To style an input type file we need to use a trick.To style input type file, we overlap the input element with the label element and apply css to that. Setting opacity of input type file hides the input but does not stops its functionality. If we use any other property, it will cause the input type file to stop working.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *