Comment utiliser le style de zone de saisie de type="file"

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

Avant, 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;}

Il devrait être très clair dans ce code que vous pouvez voir la méthode d'implémentation. Le bouton de téléchargement est positionné au-dessus de l'image via le positionnement. L'image peut être utilisée comme image d'arrière-plan d'un vide. étiquette, puis le bouton de téléchargement est Après avoir réglé la transparence de l'opacité à 0, vous ne pourrez plus voir le bouton, mais il existe réellement, et puis... alors... il n'y en a plus, et l'effet est là...

Une solution pour le webkit

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

La structure HTML de ce code est très simple. Une seule [

balise d'entrée suffit. C'est beaucoup plus simple que la méthode vue précédemment, mais pour la compatibilité, c'est définitivement très différent. .Je ne sais pas comment ça se passe sur le téléphone mobile De nos jours, la plupart des téléphones mobiles utilisent des navigateurs basés sur des webkits, traitons-le simplement comme un divertissement et amusons-le à le regarder~

HTML simple La structure. le style de modification dépend entièrement du pseudo-élément ::-webkit-file-upload-button. Apportez simplement les modifications correspondantes au style de ce pseudo-élément, car il ne s'agit que d'un élément de bouton ordinaire. Ce sera plus clair si nous visualisons cet élément de bouton en affichant le shadow DOM.

Il s'agit de l'arborescence DOM vue dans les outils de développement Chrome. De manière générale, si nous n'activons pas la visualisation du Shadow DOM, nous ne pourrons pas voir qu'une entrée de type="file" contient autant de choses. contenu. . La façon de l'activer est très simple, il suffit de cliquer sur l'engrenage dans le coin supérieur droit des outils de développement, puis de cocher cette case dans la couche contextuelle.

Les lecteurs peuvent désormais vérifier eux-mêmes les autres balises d'entrée. S'il existe un DOM fantôme, il peut certainement être étendu. Ensuite parmi les nouvelles balises HTML5, il y en a...

Enfin

Pour la balise input de type="file", actuellement, la méthode de style que je connais peut être modifiée Juste celles-ci deuxièmement, et la solution pour le webkit est également très limitée, mais cela ne devrait poser aucun problème pour le téléphone mobile. Certaines personnes diront peut-être : que dois-je faire avec d’autres navigateurs ? Oui, je ne sais pas quoi faire.

Dans le navigateur Firefox, bien qu'il y ait un sélecteur input type="file" > bouton[type="button"] dans Forms.css, mais je ne sais pas pourquoi, je l'ai dans mon propre style Après avoir ajouté ce sélecteur, je n'ai toujours vu aucun effet, j'ai donc arrêté de jouer.

PS : Pour le fichier form.css, si vous êtes fan du navigateur Firefox, vous devez connaître l'existence du chemin ressource://gre-resources/forms.css.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

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!