Benutzerdefinierte Schaltflächenverschönerung der Eingabedatei (Demo)_HTML/Xhtml_Webseitenproduktion

Ich habe schon einmal einen Artikel wie diesen geschrieben, aber ein js-Skript verwendet. Der Vorteil ist, dass es den Dateipfad anzeigen kann.

Wenn Sie den Pfad nicht sehen und nur die benutzerdefinierte Schaltfläche anzeigen können, gibt es andere Methoden. Das Folgende ist nur eine CSS-Technik.

Der Schlüssel besteht darin, dem Dateifeld eine Schriftgröße zuzuweisen und einen relativ großen Wert festzulegen, damit sich die Groß- und Kleinschreibung des Formulars ändert (das Erscheinungsbild jedes Browsers ist unterschiedlich, aber die Groß- und Kleinschreibung ändert sich), wie unten gezeigt:

Eingabe{font-size:100px;}

Anschließend nutzen Sie Position und Transparenz, um den gewünschten Effekt zu erzielen. Der spezifische Code lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

.fileInputContainer{
height:256px;
background:url(http://files.jb51.net/file_images/article/201212/2012122514125641.png);
position:relative;
width : 256px;
}
.fileInput{
height:256px;
overflow: versteckt;
Schriftgröße: 300px;
position:absolute;
right:0;
top:0 ;
opacity: 0;
filter:alpha(opacity=0);
cursor:pointer;
}

Code kopieren

Der Code lautet wie folgt:

DEMO: