Membuat Form Input File dengan CSS

Membuat Form Input File dengan CSS - Beberapa bulan yang lalu, Blogger memperbaharui form contact menjadi lebih baik dan bahkan form tersebut bisa dipasang dimanapun didalam blog sobat. Mengacu pada form kontak tersebut, maka saya sedikit membuat perubahan dengan menjadikannya sebagai form input file dengan menggunakan CSS yang telah saya edit serta penggabungan dari kode input yang biasa digunakan

Dengan adanya form input file ini, kita bisa memilih file-file yang akan kita upload atau yang akan kita gunakan untuk keperluan tertentu, dan tentu saja karena hanya menggunakan kode CSS maka cara kerjanya pun tidak langsung bisa diterapkan terhadap file yang akan digunakan tapi untuk formnya sendiri bisa langsung digunakan dan bisa langsung memilih file yang sesuai dengan keinginan sobat...

Bingung dengan penjelasan di atas? Terapkan langsung demonya berikut ini, silahkan klik pada Pilih file maka sobat akan dibawa kedalam folder penyimpan file sobat

Pilih file

Bagaimana tertarik untuk menggunakan form input file diatas? Jika iya silahkan saja, namun sebagai catatan, form tersebut akan bekerja secara maksimal jika sobat memasukkannya kedalam host file sobat dan tentunya juga diperlukan kode tambahan misalnya php atau javascript. Kalau hanya seperti demo diatas, ya hanya sekedar seperti itu saja, apalagi blog yang sobat gunakan adalah Blogger atau Blogspot, ya hanya seperti demo itu saja cara kerjanya, tidak lebih dan tidak kurang :)

Cara Membuat Form Input File dengan CSS

Lalu bagaimana cara membuat form input tersebut? Berikut caranya...
CSS
Salin kode berikut kedalam kode template blog sobat

.input-form {
margin: 0;
outline: none;
font: 13px/1.55 Arial, sans-serif;
color: #666;
}
.input-form area {
margin:0px;
}
.input-form .box {
display: block;
margin:0;
}
.input-form .input,
.input-form .button {
position: relative;
display: block;
}
.input-form .input-file input {
display: block;
width: 450px;
height: 30px;
padding: 8px 10px;
outline: none;
border: 2px solid #404040;
border-radius: 0;
background: #fff;
font: 15px/19px Arial, sans-serif;
color: #404040;
}
.input-form .input-file .button {
position: absolute;
top: 25px;
right: 20px;
float: none;
height: 25px;
margin: 0;
padding: 0 20px;
font-size: 13px;
line-height: 25px;
}
.input-form .input-file .button input {
position: absolute;
top: 0;
right: 0;
padding: 0;
font-size: 30px;
cursor: pointer;
opacity: 0;
}
.input-form .button {
background:#008cea;
float: right;
height: 25px;
overflow: hidden;
margin: 0 0 0 20px;
padding: 25px;
outline: none;
border: 0;
font: 300 15px/39px Arial, sans-serif;
text-decoration: none;
color: #fff;
cursor: pointer;
}

Penjelasan :

Mengatur lebar kolom form : Ganti nilai 450px sesuai dengan ukuran lebar yang diinginkan didalam kode berikut ini

.input-form .input-file input {
display: block;
width: 450px;
......}

Mengatur posisi tombol Pilih file : Sesuaikan jarak atas (top) dan kanan (right) sesuai dengan kolom form pada kode berikut ini

.input-form .input-file .button {
position: absolute;
top: 25px;
right: 20px;
float: none;
height: 25px;
margin: 0;
padding: 0 20px;
font-size: 13px;
line-height: 25px;
}

Mengatur posisi teks pada tombol Pilih file : Sesuaikan letak teks dengan mengatur nilai angka pada kode berikut ini, samakan nilai tinggi (height) pada setiap kode

.input-form .input-file .button {
position: absolute;
top: 25px;
right: 20px;
float: none;
height: 25px;
margin: 0;
padding: 0 20px;
font-size: 13px;
line-height: 25px;
}

HTML
Silahkan salin kode berikut kedalam blog atau kedalam artikel blog atau kedalam widget blog sobat

<form class="input-form">
<area>
<box for="file" class="input input-file">
<div class="button">
<input type="file" id="file" onchange="this.parentNode.nextSibling.value = this.value">Pilih file</div>
<input type="text" placeholder="Masukkan file" readonly>
</box>
</area>     
</form>

Jika sudah silahkan tinggalkan komentar sobat karena cara membuat form input file ini saya kira cukup mudah untuk dilakukan. Dan jika memang tidak digunakan karena tidak berfungsi secara maksimal maka jangan menggunakan panduan ini karena panduan ini hanya sebagai acuan dalam membuat form input file dengan css