Mengubah Style Tombol Upload (upload button / input[type=file]) dengan CSS

Bagaimana mengubah style tombol upload (upload button / input[type=file]) dengan CSS? Pada gambar berikut dapat dilihat beberapa variasi tom...

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.
Nama

Catatanku CSS Hosting Kesehatan Ragam Teknologi Website
false
ltr
item
Gampong IT - Teknologi Informasi, Pengembangan Website dan Aplikasi: Mengubah Style Tombol Upload (upload button / input[type=file]) dengan CSS
Mengubah Style Tombol Upload (upload button / input[type=file]) dengan CSS
http://3.bp.blogspot.com/-C1FsibBNuDk/U4H-WNYApbI/AAAAAAAAAL8/5rRJ-ti7pT4/s1600/upload-button.png
http://3.bp.blogspot.com/-C1FsibBNuDk/U4H-WNYApbI/AAAAAAAAAL8/5rRJ-ti7pT4/s72-c/upload-button.png
Gampong IT - Teknologi Informasi, Pengembangan Website dan Aplikasi
http://www.gampongit.com/2014/05/mengubah-style-tombol-upload-css.html
http://www.gampongit.com/
http://www.gampongit.com/
http://www.gampongit.com/2014/05/mengubah-style-tombol-upload-css.html
true
7328831568449542683
UTF-8
Tidak ditemukan artikel apapun LIHAT SEMUA Selengkapnya Balas Batal Balas Hapus Oleh Beranda HALAMAN ARTIKEL Lihat Semua REKOMENDASI LABEL ARSIP SEARCH SEMUA ARTIKEL Tidak ditemukan posting yang sesuai dengan permintaan Anda Halaman Utama Minggu Senin Selesa Rabu Kamis Jumat Sabtu Min Sen Sel Rab Kam Jum Sab Januari Februari Maret April Mei Juni Juli Agustus September Oktober November Desember Jan Feb Mar Apr Mei Jun Jul Agu Sep Okt Nov Des baru saja 1 menit lalu $$1$$ minutes ago 1 jam lalu $$1$$ hours ago Kemarin $$1$$ days ago $$1$$ weeks ago lebih dari 5 minggu yang lalu Pengikut Ikuti KONTEN PREMIUM Silakan share untuk membuka Salin Semua Code Pilih Semua Code Semua kode disalin ke clipboard Anda Tidak dapat menyalin kode/teks, silakan tekan [CTRL] + [C] (atau CMD + C dengan Mac) untuk menyalin