Maison > interface Web > tutoriel HTML > Créer un code de style de bouton de téléchargement personnalisé en HTML

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

零下一度
Libérer: 2017-04-22 10:04:33
original
3412 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal