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
Eine ausführliche Zusammenfassung der Überlegungen zu MySQL-Zeiteinstellungen
Existiert die Zeit wirklich? Manche Menschen glau...
Detaillierte Erläuterung zur Lösung des Zirkelreferenzproblems bei der Verwendung von JSON.stringify
Wenn Programmierer täglich TypeScript-/JavaScript...
Detaillierter Informationsaustausch über das MySQL-Protokollsystem
Jeder, der schon einmal an einem großen System ge...
Installations-Tutorial zur komprimierten Version von MySQL 8.0.11
In diesem Artikel finden Sie das Installations-Tu...
Native JS realisiert den besonderen Effekt der Verbreitung von Liebe durch Mausbewegungen
In diesem Artikel wird ein JS-Spezialeffekt vorge...
Detaillierter Prozess zum Konfigurieren eines HTTPS-Zertifikats unter Nginx
1. Der Unterschied zwischen HTTP und HTTPS HTTP: ...
Detailliertes Beispiel für die Verwendung von CSS zur Verschönerung von HTML-Formular-Steuerelementen (Formularverschönerung)
1. Grundlegende Syntaxstruktur der HTML-Senden- u...
Fälle, in denen bestimmte Bibliotheken beim Sichern der Datenbank mit mysqldump ausgeschlossen werden
veranschaulichen: Mit mysqldump –all-databases we...
Zweistündiges Docker-Einführungstutorial
Inhaltsverzeichnis 1.0 Einleitung 2.0 Docker-Inst...
Detaillierte Erläuterung des Beispielcodes für das elastische CSS3 Flex-Layout
1. Grundlegende Konzepte //Jeder Container kann a...
Vue-cli erstellt ein Projekt und analysiert die Projektstruktur
Inhaltsverzeichnis 1. Geben Sie ein Verzeichnis e...
Super detaillierte grundlegende JavaScript-Syntaxregeln
Inhaltsverzeichnis 01 JavaScript (abgekürzt: js) ...
Vue3 verwendet Axios Interceptor zum Drucken von Front-End-Protokollen
Inhaltsverzeichnis 1. Einleitung 2. Verwenden Sie...
Installieren Sie drei oder mehr Tomcats unter einem Linux-System (detaillierte Schritte)
Wenn Sie mehrere Tomcats installieren möchten, mü...
Problem mit der V-HTML-Rendering-Komponente
Da ich bereits HTML analysiert habe, möchte ich h...