Cette fois, je vais vous montrer comment utiliser le style de zone de saisie de type="file". Quelles sont les précautions lors de l'utilisation du style de zone de saisie de type="file". cas pratique. Levez-vous et jetez un œil.
Quelle est l'entrée de type="file" ?
Je ne pense pas qu'il soit nécessaire de dire ce que c'est, tout le monde le sait de toute façon, et à l'ère des différents téléphones portables, vous pouvez aussi le télécharger en prenant des photos directement, ce qui est bien plus amusant qu'avant.
Et dans le passé, vous ne pouviez télécharger qu'un seul fichier. Désormais, vous pouvez télécharger plusieurs fichiers en ajoutant l'attribut multiple, et de nombreux formats de fichiers sont pris en charge. Sans plus tarder, veuillez consulter
Tous ceux qui ont joué avec CSS savent que parmi leséléments HTML, il est le plus pénible de modifier le style des éléments de contrôle de formulaire. Les styles de nombreux contrôles sont modifiés en fonction du thème du système. . Si vous souhaitez le modifier, ne peut être implémenté que par simulation, notamment dans le navigateur IE.
Pour le bouton de téléchargement type="file", nous avons modifié son style une fois. Certaines personnes ont utilisé la méthode de simulation, mais on dit que l'utilisation de la méthode de simulation peut provoquer des problèmes de sécurité, d'accord, pour un Un gars qui coupe des pages et des images comme moi, je ne comprends pas ça, et même si je comprends, je ne sais pas comment gérer ça. Alors ne le simulez pas...Mais si vous ne le simulez pas, comment pouvez-vous modifier le style ? Schéma de superposition de positionnement d'imageAvant, la méthode que je connaissais, et en fait tout le monde la connaît, est de rendre le bouton de téléchargement avec type="file" transparent puis de le superposer sur une image. , cela peut donner aux gens l'impression que cela est réalisé en cliquant pour télécharger l'image, et qu'il n'est pas nécessaire de regarder le bouton de téléchargement natif.<input type="file" id="upfile" ><span ></span>.up_icon,.up_input {position: absolute;top: 10px;left: 10px;width: 64px;height: 64px;z-index: 2}.up_icon {overflow: hidden;font-size: 0;line-height: 99em;background: url(http://sfault-image.b0.upaiyun.com/346/967/3469672357-54250d7235406_articlex) no-repeat 0 0;z-index: 1;}
Cette solution pour le noyau du webkit est en fait un peu ridicule et a peu d'utilité pratique, car elle n'est efficace que pour le noyau du webkit. ne prend pas en charge la méthode d'écriture avec le préfixe -webkit-, cela n'aura aucun effet, vous pouvez donc simplement le prendre comme divertissement.
<input type="file" id="upfile">input[type="file"]::-webkit-file-upload-button {position: absolute;top: 10px;left: 10px;width: 64px;height: 64px;overflow: hidden;line-height: 99em;background:url(http://sfault-image.b0.upaiyun.com/346/967/3469672357-54250d7235406_articlex) no-repeat 0 0;border: 0 none;z-index: 2;}
Comment résoudre le problème de l'affichage incomplet des colonnes verticales de texte en HTML
Comment utiliser html Un lien hypertexte ouvre une nouvelle fenêtre et contrôle les propriétés de la fenêtre
Comment utiliser le style pour ajouter des attributs en html
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!