Fail input pengindahan butang tersuai (demo)_HTML/Xhtml_pengeluaran halaman web

Saya pernah menulis artikel seperti ini sebelum ini tetapi menggunakan skrip js Kelebihannya ialah ia boleh memaparkan laluan fail.

Jika anda tidak dapat melihat laluan dan hanya memaparkan butang tersuai, terdapat kaedah lain yang berikut hanyalah teknik css.

Kuncinya adalah untuk memberikan saiz fon pada medan fail dan tetapkan nilai yang agak besar supaya huruf besar bentuk berubah (penampilan setiap penyemak imbas berbeza, tetapi huruf besar ditukar) seperti yang ditunjukkan di bawah:

masukan{font-saiz:100px;}

Kemudian gunakan kedudukan dan ketelusan untuk mencapai kesan yang anda inginkan. Kod khusus adalah seperti berikut:

Salin kod

Kod tersebut adalah seperti berikut:

.fileInputContainer{
ketinggian:256px;
latar belakang:url(http://files.jb51.net/file_images/article/201212/2012122514125641.png);
kedudukan:relatif;
: 256px;
}
.fileInput{
tinggi:256px;
limpahan: tersembunyi;
saiz fon: 300px;
kedudukan:mutlak;
kanan:0;
atas:0 ;
kelegapan: 0;
penapis:alpha(opacity=0);
kursor:penunjuk;
}

Salin kod

Kod adalah seperti berikut:

DEMO: