So implementieren Sie die Stilsteuerung von input[type=file] mit reinem CSS (Codebeispiel)-CSS-Tutorial-php.cn

So implementieren Sie die Stilsteuerung von input[type=file] mit reinem CSS (Codebeispiel)

不言

Freigeben： 2018-11-06 11:02:51

Original

4486 Leute haben es durchsucht

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:

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 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>

Nach dem Login kopieren

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!