Beispiel für die Anpassung des Stils des Auswahlfelds für Formulardateien

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

JavaScript zum Erreichen aller oder umgekehrter Auswahlfunktionen

In diesem Artikel wird der spezifische JavaScript...

Zusammenfassung der gebräuchlichen Buchstaben in Unicode

Die meisten der ersten Computer konnten nur ASCII...

Detaillierte Erläuterung der logischen Architektur von MySQL

1. Gesamtarchitekturdiagramm Im Vergleich zu ande...

Wie kompliziert ist die Priorität von CSS-Stilen?

Gestern Abend habe ich mir eine Interviewfrage ang...

Detaillierte Erläuterung der Nginx Rewrite-Nutzungsszenarien und Codebeispiele

Nginx Rewrite-Nutzungsszenarien 1. Sprung der URL...

5 Möglichkeiten zum Löschen oder Entfernen großer Dateiinhalte in Linux

Beim Arbeiten mit Dateien im Linux-Terminal möcht...

Installations-Tutorial zur neuesten MySQL-Version 8.0.17 mit Dekomprimierung

Ich persönlich denke, dass die dekomprimierte Ver...

Vue implementiert die Bottom-Query-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Zwei Implementierungslösungen für die Vuex-Datenpersistenz

Inhaltsverzeichnis Geschäftsanforderungen: Lösung...

NodeJS realisiert die Bildtextsegmentierung

In diesem Artikel wird der spezifische Code von N...

Verwenden des CSS-Loaders zum Implementieren des CSS-Moduls in Vue-CLI

【Vorwort】 Sowohl die modularen CSS-Lösungen von V...

CSS implementiert problemlos Container auf Blockebene mit festem Verhältnis

Beim Entwerfen eines H5-Layouts werden Sie normal...