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:
CSS:
Preview:
Download Source
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; }
Preview:
Download Source
Tags:
CSS
CSS - Twitter Bootstrap custom file input styling
By yash →
Tuesday, July 26, 2016