Maison  >  Article  >  interface Web  >  Comment implémenter un bouton de téléchargement d'image personnalisé en html+css

Comment implémenter un bouton de téléchargement d'image personnalisé en html+css

醉折花枝作酒筹
醉折花枝作酒筹avant
2021-04-21 09:49:593104parcourir

Cet article vous donnera une introduction détaillée à la méthode d'implémentation d'un bouton de téléchargement d'image personnalisé à l'aide de html+css. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Comment implémenter un bouton de téléchargement d'image personnalisé en html+css

Comment implémenter un bouton de téléchargement dimage personnalisé en html+css

L'effet d'une saisie ordinaire[type='file'] est très simple

Comment implémenter un bouton de téléchargement dimage personnalisé en html+css
Vous pouvez personnaliser un bouton de fichier pour sélectionner un fichier :

L'idée est :

Utiliser le positionnement pour recouvrir le bouton de sélection de fichier d'origine avec le bouton personnalisé, puis déclencher le bouton d'origine lorsque le le bouton personnalisé est cliqué Il suffit de sélectionner l'événement du bouton de fichier (pour cela, une étiquette peut être implémentée)

par exemple :

html:

Comment implémenter un bouton de téléchargement dimage personnalisé en html+css

style CSS :

Comment implémenter un bouton de téléchargement dimage personnalisé en html+css

Photo du résultat :

Comment implémenter un bouton de téléchargement dimage personnalisé en html+css

Cliquez sur le bouton "Sélectionner une image", l'événement de sélection l'image sera déclenchée et vous pourrez choisir une image !

Ce qui précède est implémenté à l'aide de bootstrap. Le natif est le suivant :

html :

Comment implémenter un bouton de téléchargement dimage personnalisé en html+css

CSS :

Comment implémenter un bouton de téléchargement dimage personnalisé en html+css

Rendu :

Comment implémenter un bouton de téléchargement dimage personnalisé en html+css

Cliquez pour faire apparaître le dossier du fichier sélectionné !

Apprentissage recommandé : Tutoriel vidéo CSS

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer