CSS - Twitter Bootstrap custom file input styling | UI, javascript, jQuery, Bootstrap, PHP, Responsive design solutions.

While using responsive frameworks like twitter bootstrap we came across a situation where we want to use file upload with consistent look and feel, but different browsers treat file input differently while displaying on browsers.

HTML:

<span class="btn btn-file">
  Upload  <input accept="image/*" type="file">
</span>

CSS:

body{
  margin: 20px;
}

/* Give custom look and feel to file upload*/
.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;   
    cursor: inherit;
    display: block;
    
}
.btn-file {
    position: relative;
    overflow: hidden;
    color: #2A476B;
    font-weight: bold;
    background-color: #f1f1ef;
    box-shadow: 1px 10px 20px 0px rgba(218, 215, 206,0.8);
    width:200px;
    height:50px;
    line-height: 30px;
    border: 2px solid #2A476B;    
}
.btn-file:hover{
   background: #2A476B;
   color:#ffffff;
}