Mengubah Style Tombol Upload dengan CSS

Bagaimana mengubah style tombol upload (upload button / input[type=file]) dengan CSS? Pada gambar berikut dapat dilihat beberapa variasi tombol upload bawaan browser. Model tombol upload berbeda-beda antara browser.

Dalam pembahasan kali ini kita akan membuat sebuah tombol upload yang menarik dan konsisten dengan CSS antara browser. Okey, langsung saja ikuti langkah berikut!

Langkah 1. Sintak HTML:

<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>

Langkah 2. Style CSS:

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

Untuk mempermudah, saya menggunakan Bootstrap CSS untuk style tombol upload (div.fileUpload).

<div class="fileUpload btn btn-default">
<span>Upload</span>
<input class="upload" type="file" />
</div>

<div class="fileUpload btn btn-primary">
<span>Upload</span>
<input class="upload" type="file" />
</div>

<div class="fileUpload btn btn-info">
<span>Upload</span>
<input class="upload" type="file" />
</div>

<div class="fileUpload btn btn-success">
<span>Upload</span>
<input class="upload" type="file" />
</div>

<div class="fileUpload btn btn-warning">
<span>Upload</span>
<input class="upload" type="file" />
</div>

<div class="fileUpload btn btn-danger">
<span>Upload</span>
<input class="upload" type="file" />
</div>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

Demo:

Upload

Upload

Upload

Upload

Upload

Upload

Tips: Menampilkan Nama File Terpilih

Sayangnya tidak dapat dibuat dengan CSS. Namun, jika Anda benar-benar ingin menampilkan file yang dipilih, berikut sintak JavaScript dapat membantu untuk kasus ini.

JavaScript:

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
};

HTML:

<input id="uploadFile" placeholder="Pilih File..." disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

Demo:

Upload

Demikian ulasan singkat meningkat style tombol upload dengan CSS. Semoga bermanfaat.