Kaedah kod untuk mencantikkan butang fail input dengan pertukaran css_Experience

Kemunculan fail input di bawah lalai sistem:
Kita boleh menukar rupa lalai sistem dengan mentakrifkan sempadan input:
Jika kita ingin menjadikan butang semak imbas lebih cantik , kami ingin menentukan Warna latar belakangnya, walaupun saya mahu menggunakan imej latar belakang untuk menggantikannya, adalah mustahil untuk menentukan lalat input melalui CSS. Saya terjumpa artikel secara kebetulan: mencantikkan kotak pemilihan fail input Pengarang menetapkan ketelusan butang lalai sistem kepada 0, dan kemudian menentukan gaya label label untuk menutup butang lutsinar.
Mengikut kaedah penulis, saya juga mencubanya Kodnya adalah seperti berikut:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Pendekatan alternatif kepada fail input</title> <style type="text/css"> <!-- * { font-size:12px} body { margin:0} .line { position:relative; float:left; padding:8px 0} .line span { float:left} input { border:1px solid #888; vertical-align:middle} .file { position:absolute; left:90px; top:8px; display:none;filter:alpha(opacity=0);opacity:0} .file1 { padding:2px 10px; display:block; float:left; background:#FF66CC; color:#fff; z-index:1; margin-left:5px; vertical-align:middle; cursor: pointer} .inputstyle { width:150px; border:1px solid #888; z-index:99} --> </style> <div class="line"> <span> <label>Muat naik fail: </label> <input name="" type="text" id="viewfile" onmouseout="document.getElementById('upload').style.display='none';" class="inputstyle"> </span> <label for="unload" onmouseover="document.getElementById('upload').style.display='block';" class="file1">Semak imbas...</label> <input type="file" onchange="document.getElementById('viewfile').value=this.value;this.style.display='none';" class="file" id="upload"> </div>