Codemethode zum Verschönern der Eingabedateischaltfläche mit css_Experience-Austausch

Das Erscheinungsbild der Eingabedatei unter der Systemvorgabe:
Wir können das Standarderscheinungsbild des Systems ändern, indem wir den Rahmen der Eingabe definieren:
Wenn wir die Schaltfläche „Durchsuchen“ schöner gestalten möchten Wir möchten die Hintergrundfarbe definieren. Selbst wenn ich ein Hintergrundbild verwenden möchte, um es zu ersetzen, ist es wirklich unmöglich, die Eingabefliege über CSS zu definieren. Ich bin zufällig auf einen Artikel gestoßen: Verschönern des Auswahlfelds für Eingabedateien. Der Autor hat die Transparenz der Systemstandardschaltfläche auf 0 gesetzt und dann einen Beschriftungsstil definiert, um die transparente Schaltfläche abzudecken.
Nach der Methode des Autors habe ich es auch versucht. Der Code lautet wie folgt:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Alternativer Ansatz zur Eingabedatei</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>Dateien hochladen: </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">Durchsuchen...</label> <input type="file" onchange="document.getElementById('viewfile').value=this.value;this.style.display='none';" class="file" id="upload"> </div>