Pada tips kali ini saya akan membuat elemen input file lebih menarik dengan CSS ?

Banyak teknik yang digunakan untuk membuat tampilan input file lebih menarik, salah satunya seperti yang saya gunakan di tips ini, yaitu dengan membuat elemen input file hilang (hidden). Bukan berarti rule cssnya menjadi display:none atau visibility:hidden, tetapi dengan rule css opacity:0.

Berikut ini css rule yang digunakan :

/* CSS RULE */
.inputFile{
    position:absolute;
    z-index:5;
    width:100%;
    height:100%;
    top:0;
    left:0;
    opacity:0;
    cursor:pointer;
}

Struktur HTMLnya :

<!-- CONTOH 1 - BASIC -->
<div class="uploadWrapper demo1">
	<div class="formInput d-block text-center">
		<button class="btn btn-success btn-block rounded-0 ">
                        <i class="fa fa-upload"></i> 
                        <span class="label">Pilih File</span>
                </button>
		<input type="file" id="inputFile1" class="inputFile" value="">
	</div>		
	<a href="javascript:;" style="display:none">Reset</a>							
</div>

Untuk lebih jelasnya kalian bisa melihat preview di bawah ini, atau download sampelnya.

Semoga bermanfaat.

 

Demo Previiew