Erstellen Sie einen benutzerdefinierten Stilcode für die Upload-Schaltfläche in HTML

In diesem Artikel werden hauptsächlich die Eingabeverschönerung von type=file und der benutzerdefinierte Upload-Button-Stilcode vorgestellt. Freunde, die ihn benötigen, können darauf verweisen.

Der Upload-Button, der mit den Attributen der Eingabe selbst erstellt wurde, kann verwendet werden verschiedene Browser Sie sehen alle unterschiedlich aus. Wie unten gezeigt:

Der für die Eingabe festgelegte Stil kann jedoch nur zum Eingabefeld hinzugefügt werden und hat überhaupt keine Auswirkung auf die Schaltfläche zum Hochladen. Dann gibt es eine supereinfache Methode, die darin besteht, zunächst ein p zu verwenden, um den gewünschten Upload-Button-Stil zu erstellen, die eigentliche Upload-Button-Eingabe auf transparent zu setzen und sie über dem p zu positionieren, das den Stil festlegt.

Beispiel:

HTML-Teil:

<p >
<p >点击上传</p>
<input type="file" >
</p>

CSS-Teil:

<style>
.p1 {
position: relative;
}

.p2 {
width: 100px;
height: 36px;
background: #2178fc;
color: #fff;
text-align: center;
line-height: 36px;
}

.file_input {
width: 200px;/*因为file-input在部分浏览器中会自带一个输入框，需要双击才可以点击上传,放大后将其定位到p外面就好啦*/
height: 36px;
position: absolute;
left: -100px;
top: 0;
z-index:1;
-moz-opacity: 0;
-ms-opacity: 0;
-webkit-opacity: 0;
opacity: 0; /*css属性——opcity不透明度，取值0-1*/
filter: alpha(opacity=0); 
/*
兼容IE8及以下--filter属性是IE特有的，它还有很多其它滤镜效果，而filter: alpha(opacity=0); 
兼容IE8及以下的IE浏览器(如果你的电脑IE是8以下的版本，使用某些效果是可能会有一个允许ActiveX的提示,注意点一下就ok啦)
*/
cursor: pointer;
}
</style>

Das ist der Effekt:

Studenten, die HTML lernen müssen, achten bitte auf die chinesische PHP-Website HTML-Video-Tutorial, viele html online Video-Tutorials können kostenlos angesehen werden!

Das obige ist der detaillierte Inhalt vonErstellen Sie einen benutzerdefinierten Stilcode für die Upload-Schaltfläche in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!