CSS-Eingabe[Typ=Datei]-Stilverschönerung (Eingabe-Upload-Dateistil)

Wirkung:

<!doctype html>  
<html>  
<Kopf>  
<meta charset="utf-8">  
<title>Unbenanntes Dokument</title>  
    <Stil>  
        /*Stil 1*/  
        .a-hochladen {  
            Polsterung: 4px 10px;  
            Höhe: 20px;  
            Zeilenhöhe: 20px;  
            Position: relativ;  
            Cursor: Zeiger;  
            Farbe: #888;  
            Hintergrund: #fafafa;  
            Rand: 1px durchgezogen #ddd;  
            Rahmenradius: 4px;  
            Überlauf: versteckt;  
            Anzeige: Inline-Block;  
            *Anzeige: inline;  
            *Zoom: 1  
        }  
        .a-upload Eingabe {  
            Position: absolut;  
            Schriftgröße: 100px;  
            rechts: 0;  
            oben: 0;  
            Deckkraft: 0;  
            Filter: Alpha (Deckkraft = 0);  
            Cursor: Zeiger  
        }  
        .a-upload:hover {  
            Farbe: #444;  
            Hintergrund: #eee;  
            Rahmenfarbe: #ccc;  
            Textdekoration: keine  
        }  
        /*Stil 2*/  
        .Datei {  
            Position: relativ;  
            Anzeige: Inline-Block;  
            Hintergrund: #D0EEFF;  
            Rand: 1px durchgezogen #99D3F5;  
            Rahmenradius: 4px;  
            Polsterung: 4px 12px;  
            Überlauf: versteckt;  
            Farbe: #1E88C7;  
            Textdekoration: keine;  
            Texteinzug: 0;  
            Zeilenhöhe: 20px;  
        }  
        .file Eingabe {  
            Position: absolut;  
            Schriftgröße: 100px;  
            rechts: 0;  
            oben: 0;  
            Deckkraft: 0;  
        }  
        .Datei:hover {  
            Hintergrund: #AADFFD;  
            Rahmenfarbe: #78C3F3;  
            Farbe: #004974;  
            Textdekoration: keine;  
        }  
    </Stil>  
</Kopf>  
<body style="padding: 10px">  
<a href="javascript:;" Klasse="a-upload">  
    <input type="file" name="" id="">Klicken Sie hier, um eine Datei hochzuladen</a>  
<a href="javascript:;" class="file">Datei auswählen<input type="file" name="" id="">  
</a>  
</body>  
</html>

Zusammenfassen

Oben ist die vom Editor eingeführte CSS-Eingabestilverschönerung [Typ = Datei] (Eingabe-Upload-Dateistil). Ich hoffe, sie wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<: Einige Hinweise zur Verwendung von Standard-HTML-Codes bei der Webseitenerstellung

>>: Umfassende Analyse von optimistischer Sperre, pessimistischer Sperre und MVCC in MySQL