browse button

styling of the browse button with only css

by Shridhar Baddur

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container" style="margin-top: 20px">

  <label class="btn btn-primary btn-file">
    Browse <input type="file">
</label>
<div class="clearfix">
This is the file name.txt
</div>
</div>

CSS

.btn-file {
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}