Heim > Artikel > Web-Frontend > So implementieren Sie die Stilsteuerung von input[type=file] mit reinem CSS (Codebeispiel)
So implementieren Sie die Stilsteuerung von input[type=file] mit reinem CSS (Codebeispiel)
- 不言Original
- 2018-11-06 11:02:514569Durchsuche
Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS zur Implementierung der Stilsteuerung von input[type=file] (Freunde in Not können sich darauf beziehen).
Wenn Sie nach Lösungen für häufig gestellte Fragen zur vollständigen Kontrolle des Erscheinungsbilds suchen, passen die Ergebnisse möglicherweise in eine der folgenden drei Kategorien: 714779e36f6b8fe3da1575391740131b
Erfordert Javascript.
funktioniert nicht im Hauptbrowser.
bietet eigentlich keine vollständige Stilkontrolle.
Die oben genannten drei passen definitiv zu jeder Antwort, die ich online gefunden habe. Aber Sie können dies mit reinem CSS tun. Es ist ein Wrapping-Element erforderlich, um den Stil einzubinden (die Eingabe selbst ist ausgeblendet, weil ihr Stil so begrenzt/eingeschränkt ist). Die Semantik möchte dies vielleicht in bfdf57554631c62e63917d588904f58a umwandeln – es ist übrigens nichts Falsches daran, mehrere Labels pro Element zu haben. Schauen wir uns dieses Beispiel unten an
Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.fileContainer {
overflow: hidden;
position: relative;
}
.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 999px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
/* Example stylistic flourishes */
.fileContainer {
background: red;
border-radius: .5em;
float: left;
padding: .5em;
}
.fileContainer [type=file] {
cursor: pointer;
}
}
</style>
</head>
<body>
<label class="fileContainer">
点击这里实现文件上传!
<input type="file"/>
</label>
</body>
</html>Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Stilsteuerung von input[type=file] mit reinem CSS (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!