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
Webdesign-TabIndex-Element
TabIndex dient zum Drücken der Tabulatortaste, um ...
Detaillierter Installationsprozess und grundlegende Verwendung von MySQL unter Windows
Inhaltsverzeichnis 1. MySQL herunterladen 2. MySQ...
Grafisches Tutorial zur Installation und Konfiguration der MySQL 8.0.16 Win10-Zip-Version
In diesem Artikel finden Sie das grafische Tutori...
Eine kurze Diskussion über Flex-Layout und Skalierungsberechnung
1. Einführung in Flex Layout Flex ist die Abkürzu...
Probleme beim Erstellen von Platzhaltern für HTML-Auswahlfelder
Ich verwende einen Platzhalter in einer Texteinga...
Lösung für Indexfehler, die durch implizite MySQL-Typkonvertierung verursacht werden
Inhaltsverzeichnis Frage Reproduktion Implizite K...
Zusammenfassung der Methoden zum Bereinigen von Mysql general_log
Methode 1: GLOBAL festlegen general_log = "A...
Implementierung der Docker-Container-Verbindung und -Kommunikation
Die Portzuordnung ist nicht die einzige Möglichke...
JavaScript, um einen ausgefallenen Karusselleffekt zu erzielen
In diesem Artikel werden zwei Methoden zur Implem...
Automatische Hot-Deployment/Neustart von Jenkins+Tomcat und Lösungen für aufgetretene Probleme (empfohlen)
1. Hintergrund Die Projekte des Unternehmens wurd...
Beispiel für die Verwendung von JS, um zu bestimmen, ob ein Element ein Array ist
Hier sind die Arten von Daten, die überprüft werd...
24 praktische Tipps zur JavaScript-Entwicklung
Inhaltsverzeichnis 1. Initialisieren Sie das Arra...
Einführung in die Farbabstimmung von Königsblau für Webdesign
Klassische Farbkombinationen vermitteln Kraft und ...
Detaillierte Erläuterung verschiedener Fehlerbehandlungen, wenn Nginx nicht gestartet werden kann
Bei der Verwendung von Nginx als Webserver sind m...
Das umfassendste Tutorial zur Installation von Centos8.1 mit VMware15.5 und dem Problem des unzureichenden physischen Speichers
1. Vorbereitung der virtuellen Maschine 1. Erstel...