Kaedah untuk menentukan input type=file style_HTML/Xhtml_Web page production

Mengapa mencantikkan kawalan fail? Cuba bayangkan, kanak-kanak yang lain semuanya berpakaian kemas dan cantik, tetapi dua daripada mereka tidak memandang rendah pada anda.

Kawalan fail asal adalah seperti ini:

Jangan fikir ini terdiri daripada teks dan butang, ia adalah kawalan , kod html ialah:

Salin kod

Kod adalah seperti berikut:

>
Dalam kes ini Kami menggunakan teks dan butang untuk memaparkan gaya fail ini Kod html adalah seperti berikut:

Salin kod<.>Kod Seperti berikut:

< ;/form>
div>


Lapisan luar div adalah untuk menyediakan rujukan kedudukan untuk input di dalam, kerana ia perlu diposisikan secara relatif semasa menulis gaya, supaya kawalan fail sebenar meliputi yang disimulasikan, dan kemudian menyembunyikan kawalan fail (walaupun kawalan fail tidak kelihatan), jadi kod css adalah seperti ini:

Salin kod

Kod adalah seperti berikut:

.file-box{ position:relative;width:340px}

.txt{ height: 22px; sempadan:1px pepejal #cdcdcd; lebar: 180px;}

.btn{ warna latar:#FFF; : absolute; atas: 0; kanan: 80px; tinggi: 24px;
Rendering:

Akhirnya meninggalkan DEMO: klik untuk melihat demo