file input styling for bootstrap 3

bootstrap-fileinput.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: 999px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: red;
  cursor: inherit;
  display: block;
}
input[readonly] {
  background-color: white !important;
  cursor: text !important;
}

bootstrap-fileinput.html

<div class="input-group">
  <span class="input-group-btn">
    <span class="btn btn-default btn-file">
      Browse... 
      <input data-url="/upload" accept="image/jpeg" name="image" type="file" id="image">
    </span>
  </span>
  <input readonly="readonly" placeholder="Picture file" class="form-control" name="filename" type="text">
</div>