Maison >interface Web >tutoriel CSS >Comment styliser les champs de saisie de fichiers comme des boutons : un guide CSS
Comment styliser les champs de saisie de fichiers comme des boutons : un guide CSS
- Susan Sarandonoriginal
- 2024-11-04 01:17:02643parcourir
Style des champs de saisie avec le type « Fichier »
Dans le domaine du développement Web, personnaliser l'apparence des champs de saisie est souvent une nécessité. Bien que les types de saisie conventionnels puissent suffire, la conception d'éléments spécifiques tels que les sélecteurs de fichiers peut présenter des défis uniques.
L'énigme de la zone de texte invisible
L'un de ces défis consiste à cacher la zone de texte traditionnelle associée à champs de saisie du fichier. L'amélioration de l'expérience utilisateur nécessite souvent une interface composée uniquement de boutons. Pour y parvenir, envisagez l'approche centrée sur CSS suivante :
Implémentation CSS :
L'extrait suivant montre comment masquer la zone de texte tout en conservant la fonctionnalité du bouton :
<code class="html"><html>
<style type="text/css">
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
div.fakefile input[type=button] {
cursor: pointer;
width: 148px;
}
div.fileinputs input.file {
position: relative;
text-align: right;
opacity: 0;
z-index: 2;
}
</style>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input type="button" value="Select file" />
</div>
</div>
</html></code>
En positionnant l'élément "fakefile" sur la zone de texte d'origine et en définissant son bouton de saisie sur toute la largeur, l'apparence d'un sélecteur de fichier de style bouton est créée. Simultanément, la zone de texte réelle est visuellement masquée sans aucune opacité.
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!