JSFiddle - React, Tailwind, and code Playground

by Arnold Daniels

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.0/css/jasny-bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.0/js/jasny-bootstrap.js"></script>
<span class="with-bg">
    <span class="bg">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
    <span>with-bg</span>
</span>
<span>Some more text</span>
<br />

Works great for normal button: <a href="#" class="btn btn-default btn-file"><input type="file" />Upload</a> 

<br /><br /><br /><br />

Not so much for `display: table-cell`:
<div class="input-group">
    <div class="form-control"></div>
    <span class="input-group-addon btn btn-default btn-file">Select file<input type="file" /></span>
</div>

CSS

span {
    display: table-cell;
}
.with-bg {
    overflow: hidden;
    position: relative;
}

.with-bg > span {
    position: relative;
    z-index: 1;
}

.with-bg > .bg {
    color: #aaa;
    position: absolute;
    z-index: 0;
}

.btn-file > input[type="file"] {
    opacity: 1;
}