Créer un code de style de bouton de téléchargement personnalisé en HTML

Cet article présente principalement l'embellissement de l'entrée de type=file et le code de style du bouton de téléchargement personnalisé. Les amis qui en ont besoin peuvent se référer à

Le bouton de téléchargement créé avec les attributs de l'entrée elle-même peut être utilisé dans. différents navigateurs. Ils ont tous un aspect différent. Comme indiqué ci-dessous :

Cependant, le style défini pour la saisie ne peut être ajouté qu'à la zone de saisie et n'a aucun effet sur le bouton de téléchargement. Ensuite, il existe une méthode très simple, qui consiste d'abord à utiliser un p pour créer le style de bouton de téléchargement souhaité, à définir l'entrée réelle du bouton de téléchargement pour qu'elle soit transparente et à la positionner au-dessus du p qui définit le style.

Exemple :

partie html :

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

partie css :

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

Voici l'effet :

Les étudiants qui ont besoin d'apprendre le HTML, veuillez faire attention au site Web php chinois tutoriel vidéo HTML, de nombreux Les didacticiels vidéo HTML en ligne sont gratuits à regarder !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!