Beispiel für die Anpassung des Stils des Auswahlfelds für Formulardateien
|
Code kopieren Der Code lautet wie folgt:<!DOCTYPE html> <html> <Kopf> <meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8"> <title>Stil des Formulardateiauswahlfelds</title> <style type="text/css">body{font-family:Arial,Verdana,sans-serif; margin:100px;}</style> <style type="text/css"> .uploader{ Position: relativ; Anzeige: Inline-Block; Überlauf: versteckt; Cursor: Standard; Polsterung: 0; Rand: 10px 0px; -moz-box-shadow:0px 0px 5px #ddd; -webkit-box-shadow:0px 0px 5px #ddd; Kastenschatten: 0px 0px 5px #ddd; -moz-border-radius:5px; -webkit-border-radius:5px; Rahmenradius: 5px; } . Dateiname{ schweben: links; Anzeige: Inline-Block; Umriss:0 keine; Höhe: 32px; Breite: 180px; Rand: 0; Polsterung: 8px 10px; Überlauf: versteckt; Cursor: Standard; Rand: 1px durchgezogen; Rand rechts: 0; Schriftart: 9pt/100 % Arial, Helvetica, serifenlos; Farbe: Nr. 777; Textschatten: 1px 1px 0px #fff; Textüberlauf: Auslassungspunkte; Leerzeichen:nowrap; -moz-border-radius:5px 0px 0px 5px; -webkit-border-radius:5px 0px 0px 5px; Rahmenradius: 5px 0px 0px 5px; Hintergrund: #f5f5f5; Hintergrund: -moz-linear-gradient (oben, #fafafa 0 %, #eee 100 %); Hintergrund: -webkit-gradient(linear, links oben, links unten, Farbstopp(0%,#fafafa), Farbstopp(100%,#f5f5f5)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f5f5f5',GradientType=0); Rahmenfarbe: #ccc; -moz-box-shadow:0px 0px 1px #fff Einschub; -webkit-box-shadow:0px 0px 1px #fff Einschub; Box-Schatten: 0px 0px 1px #fff Einschub; -moz-box-sizing:Rahmenbox; -webkit-box-sizing:Rahmenbox; Boxgröße: Rahmenbox; } .Taste{ schweben: links; Höhe: 32px; Anzeige: Inline-Block; Umriss:0 keine; Polsterung: 8px 12px; Rand: 0; Cursor:Zeiger; Rand: 1px durchgezogen; Schriftart: fett 9pt/100 % Arial, Helvetica, serifenlos; -moz-border-radius:0px 5px 5px 0px; -webkit-border-radius:0px 5px 5px 0px; Rahmenradius: 0px 5px 5px 0px; -moz-box-shadow:0px 0px 1px #fff Einschub; -webkit-box-shadow:0px 0px 1px #fff Einschub; Box-Schatten: 0px 0px 1px #fff Einschub; .uploader input[Typ=Datei]{ Position: absolut; oben: 0; rechts: 0; unten: 0; Rand: 0; Polsterung: 0; Rand: 0; Höhe: 30px; Cursor:Zeiger; Filter: Alpha (Deckkraft = 0); -moz-Deckkraft:0; -khtml-Deckkraft: 0; Deckkraft: 0; } Eingabe [Typ = Schaltfläche]::-moz-focus-inner {Padding: 0; Rahmen: 0 keine; -moz-box-sizing: Inhaltsbox;} Eingabe [Typ = Schaltfläche]::-webkit-focus-inner{Padding:0; Rahmen:0 keine; -webkit-box-sizing:content-box;} Eingabe [Typ = Text]::-moz-focus-inner{Padding:0; Rahmen:0 keine; -moz-box-sizing:Inhaltsbox;} Eingabe [Typ = Text]::-webkit-focus-inner{Padding:0; Rahmen:0 keine; -webkit-box-sizing:content-box;} /* Weißes Farbschema ------------------------- */ .weißer .Knopf{ Farbe: Nr. 555; Textschatten: 1px 1px 0px #fff; Hintergrund:#ddd; Hintergrund: -moz-linear-gradient (oben, #eeeeee 0 %, #dddddd 100 %); Hintergrund: -webkit-gradient(linear, links oben, links unten, Farbstopp(0%,#eeeeee), Farbstopp(100%,#dddddd)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0); Rahmenfarbe: #ccc; } .weiß:schweben .button{ Hintergrund:#eee; Hintergrund: -moz-linear-gradient (oben, #dddddd 0 %, #eeeeee 100 %); Hintergrund: -webkit-gradient(linear, links oben, links unten, Farbstopp(0%,#dddddd), Farbstopp(100%,#eeeeee)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#eeeeee',GradientType=0); } /* Blaues Farbschema --------------------------- */ .blauer .Knopf{ Farbe: #fff; Textschatten: 1px 1px 0px #09365f; Hintergrund: #064884; Hintergrund: -moz-linear-gradient (oben, #3b75b4 0 %, #064884 100 %); Hintergrund: -webkit-gradient(linear, links oben, links unten, Farbstopp(0%,#3b75b4), Farbstopp(100%,#064884)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b75b4', endColorstr='#064884',GradientType=0); Rahmenfarbe: #09365f; } .blau:schweben .button{ Hintergrund: #3b75b4; Hintergrund: -moz-linear-gradient (oben, #064884 0 %, #3b75b4 100 %); Hintergrund: -webkit-gradient(linear, links oben, links unten, Farbstopp(0%,#064884), Farbstopp(100%,#3b75b4)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#064884', endColorstr='#3b75b4',GradientType=0); } /* Grünes Farbschema --------------------------- */ .grüner .Knopf{ Farbe: #fff; Textschatten: 1px 1px 0px #6b7735; Hintergrund: #7d8f33; Hintergrund: -moz-linear-gradient (oben, #93aa4c 0 %, #7d8f33 100 %); Hintergrund: -webkit-gradient(linear, links oben, links unten, Farbstopp(0%,#93aa4c), Farbstopp(100%,#7d8f33)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#93aa4c', endColorstr='#7d8f33',GradientType=0); Rahmenfarbe: #6b7735; } .grün:schweben .button{ Hintergrund: #93aa4c; Hintergrund: -moz-linear-gradient (oben, #7d8f33 0 %, #93aa4c 100 %); Hintergrund: -webkit-gradient(linear, links oben, links unten, Farbstopp(0%,#7d8f33), Farbstopp(100%,#93aa4c)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d8f33', endColorstr='#93aa4c',GradientType=0); } /* Rotes Farbschema ------------------------- */ .roter .Knopf{ Farbe: #fff; Textschatten: 1px 1px 0px #7e0238; Hintergrund: #90013f; Hintergrund: -moz-linear-gradient (oben, #b42364 0 %, #90013f 100 %); Hintergrund: -webkit-gradient(linear, links oben, links unten, Farbstopp(0%,#b42364), Farbstopp(100%,#90013f)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b42364', endColorstr='#90013f',GradientType=0); Rahmenfarbe: #7e0238; } .rot:hover .button{ Hintergrund: #b42364; Hintergrund: -moz-linear-gradient (oben, #90013f 0 %, #b42364 100 %); Hintergrund: -webkit-gradient(linear, links oben, links unten, Farbstopp(0%,#90013f), Farbstopp(100%,#b42364)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#90013f', endColorstr='#b42364',GradientType=0); } /* Oranges Farbschema --------------------------- */ .orange .button{ Farbe: #fff; Textschatten: 1px 1px 0px #c04501; Hintergrund: #d54d01; Hintergrund: -moz-linear-gradient (oben, #f86c1f 0 %, #d54d01 100 %); Hintergrund: -webkit-gradient(linear, links oben, links unten, Farbstopp(0%,#f86c1f), Farbstopp(100%,#d54d01)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f86c1f', endColorstr='#d54d01',GradientType=0); Rahmenfarbe: #c04501; } .orange:hover .button{ Hintergrund: #f86c1f; Hintergrund: -moz-linear-gradient (oben, #d54d01 0 %, #f86c1f 100 %); Hintergrund: -webkit-gradient(linear, links oben, links unten, Farbstopp(0%,#d54d01), Farbstopp(100%,#f86c1f)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d54d01', endColorstr='#f86c1f',GradientType=0); } /* Schwarzes Farbschema --------------------------- */ .schwarz .Knopf{ Farbe: #fff; Textschatten: 1px 1px 0px #111111; Hintergrund: #222222; Hintergrund: -moz-linear-gradient (oben, #444444 0 %, #222222 100 %); Hintergrund: -webkit-gradient(linear, links oben, links unten, Farbstopp(0%,#444444), Farbstopp(100%,#222222)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222',GradientType=0); Rahmenfarbe: #111111; } .schwarz:hover .button{ Hintergrund: #444444; Hintergrund: -moz-linear-gradient (oben, #222222 0 %, #444444 100 %); Hintergrund: -webkit-gradient(linear, links oben, links unten, Farbstopp(0%,#222222), Farbstopp(100%,#444444)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#444444',GradientType=0); } </Stil> <script id="jquery_172" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script> <Skriptsprache="Javascript"> $(Funktion(){ $("Eingabe[Typ=Datei]").ändern(Funktion(){$(diese).parents(".uploader").finden(".dateiname").val($(diese).val());}); $("Eingabe[Typ=Datei]").jeweils(Funktion(){ if($(this).val()==""){$(this).parents(".uploader").find(".filename").val("Keine Datei ausgewählt...");} }); }); </Skript> </Kopf> <Text> <div Klasse="Uploader weiß"> <input type="text" class="dateiname" readonly="schreibgeschützt"/> <input type="button" name="file" class="button" value="Durchsuchen..."/> <Eingabetyp="Datei" Größe="30"/> </div> <br/> <div Klasse="Uploader blau"> <input type="text" class="dateiname" readonly="schreibgeschützt"/> <input type="button" name="file" class="button" value="Durchsuchen..."/> <Eingabetyp="Datei" Größe="30"/> </div> <br/> <div Klasse="Uploader grün"> <input type="text" class="dateiname" readonly="schreibgeschützt"/> <input type="button" name="file" class="button" value="Durchsuchen..."/> <Eingabetyp="Datei" Größe="30"/> </div> <br/> <div Klasse="Uploader rot"> <input type="text" class="dateiname" readonly="schreibgeschützt"/> <input type="button" name="file" class="button" value="Durchsuchen..."/> <Eingabetyp="Datei" Größe="30"/> </div> <br/> <div Klasse="Uploader orange"> <input type="text" class="dateiname" readonly="schreibgeschützt"/> <input type="button" name="file" class="button" value="Durchsuchen..."/> <Eingabetyp="Datei" Größe="30"/> </div> <br/> <div Klasse="Uploader schwarz"> <input type="text" class="dateiname" readonly="schreibgeschützt"/> <input type="button" name="file" class="button" value="Durchsuchen..."/> <Eingabetyp="Datei" Größe="30"/> </div> </body> </html> |
<<: Die Verwendung der Vue-Direktive v-bind und zu beachtende Punkte
>>: Benutzerzentriertes Design
Artikel empfehlen
Zusammenfassung häufig verwendeter SQL-Operationen in MySQL-Tabellen
1. Sehen Sie sich die Feldtypen in der Tabelle an...
So verteilen Sie mit CSS zwei Schaltflächen auf der linken und rechten Seite desselben übergeordneten Tags
In diesem Artikel wird hauptsächlich die Methode ...
Installations-Tutorial zur MySQL 5.7.17 Zip-Paketversion unter Win10
Das Installationstutorial für mysql5.7.17 wird Ih...
JavaScript implementiert die Kontrollkästchenauswahlfunktion
In diesem Artikelbeispiel wird der spezifische Ja...
Referenzschreiben im JS- und CSS-Stil
CSS: 1. <link type="text/css" href=&q...
Kompatibilitätsprobleme beim Einfügen von Audiodateien in HTML und beim Abspielen in Browsern
Lassen Sie uns über einige Probleme sprechen, die ...
Mysql fragt die ausgeführten Transaktionen ab und wie auf Sperren gewartet werden soll
Verwenden Sie navicat zum Testen und Lernen: Verw...
MySQL verwendet Trigger, um das Zeilenlimit der Tabelle in der Datenbank zu lösen. Detaillierte Erklärung und Beispiele
MySQL verwendet Trigger, um das Zeilenlimit der T...
Tutorial zu HTML-Tabellen-Tags (27): Zell-Hintergrundbild-Attribut BACKGROUND
Wir können ein Hintergrundbild für die Zelle fest...
js, um einen einfachen Drag-Effekt zu erzielen
In diesem Artikel wird der spezifische Code von j...
So konfigurieren Sie Linux für die Verwendung der LDAP-Benutzerauthentifizierung
Ich verwende die in CentOS implementierte LDAP-Be...
Linux (Center OS7) installiert JDK, Tomcat und MySQL, um eine Ausführungsumgebung für Java-Webprojekte zu erstellen.
1. JDK installieren 1. Deinstallieren Sie die alt...
Entwicklung eines Miniprogramms zur Implementierung einer einheitlichen Verwaltung von Access_Token
Inhaltsverzeichnis TOKEN Timer-Aktualisierung 2. ...
Kann CSS auf diese Weise verwendet werden? Die Kunst wunderlicher Farbverläufe
Im vorherigen Artikel – Der Charme einer Zeile CS...
MYSQL 5.6 Bereitstellung und Überwachung der Slave-Replikation
MYSQL 5.6 Bereitstellung und Überwachung der Slav...