Cara Styling Input File dengan Tailwind CSS
Input file memilki style bawaan browser. Stylenya berbeda-beda.
Namun kita bisa styling input file dengan CSS, sehingga tampilannya menjadi konsisten di semua browser.
Lebih mudah lagi dengan tailwind, yang sudah menyediakan utility class untuk styling file input.
Berikut langkah-langkah pembuatanya:
1. Styling Input File Bagian Luar
Pertama styling input file bagian luar atau kotak inputnya. Yaitu dengan menambahkan padding, border dan border radius.
<input type="file" class="pr-3 border border-gray-300 rounded-md" />Perhatikan, untuk padding left tidak diberi nilai karena itu untuk tempatnya label Choose File.
Hasilnya:
2. Styling Label “Choose File”
Selanjutnya styling label “Coose File” dengan file variant. Tambahkan class tinggi, padding, margin, backround dan border right.
<input type="file" class="pr-3 border border-gray-300 rounded-md file:h-full file:px-3 file:py-2 file:mr-3 file:bg-gray-100 file:border-r file:border-gray-300" />Hasilnya:
Demikian cara stying input file dengan tailwind css. Untuk lebih lanjut bisa baca di TailwindCSS - Hover, focus, and other states.
Baca juga Cara Membuat Preview Gambar pada Input File.