input[type=file]をCSSで加工する

See the Pen input css decoration by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

HTMLはこちら。

<div class="uploadButton">
    ファイルを選択
    <input type="file" onchange="uv.style.display='inline-block'; uv.value = this.value;" />
    <input type="text" id="uv" class="uploadValue" disabled />
</div>

CSSはこちら。

.uploadButton {
    display:inline-block;
    position:relative;
    overflow:hidden;
    border-radius:3px;
    background:#099;
    color:#fff;
    text-align:center;
    padding:10px;
    line-height:30px;
    width:180px;
    cursor:pointer;
}
.uploadButton:hover {
    background:#0aa;
}
.uploadButton input[type=file] {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;    
    cursor:pointer;
    opacity:0;
}
.uploadValue {
    display:none;
    background:rgba(255,255,255,0.2);
    border-radius:3px;
    padding:3px;
    color:#ffffff;
}

「uploadButton」をボタンの枠として、input[type=file]を透明化して枠いっぱいに広げています。
そうすることで「uploadButton」をクリックした時にファイル選択できる形になります。

しかしinput[type=file]を透明にするとファイル選択後の表示も透明になってしまいます。
そこでinput[type=text]も設置し、その中にinput[type=file]の値を収めるようにしています。