Maison >interface Web >tutoriel CSS >Comment personnaliser le bouton de saisie de fichier et masquer la zone de texte en HTML ?
Comment personnaliser le bouton de saisie de fichier et masquer la zone de texte en HTML ?
- Patricia Arquetteoriginal
- 2024-11-01 16:51:02893parcourir
Comment styliser pour masquer la zone de texte et afficher uniquement le bouton
Style peut être difficile, surtout lorsque vous essayez de masquer la zone de texte et d'afficher uniquement le bouton.
Solution CSS
Pour obtenir l'effet souhaité en utilisant CSS, considérez le code suivant :
<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] {
/* enough width to completely overlap the real hidden file control */
cursor: pointer;
width: 148px;
}
div.fileinputs input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
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>
Ce code CSS crée un faux bouton de fichier qui chevauche l'entrée du fichier réel et masque la zone de texte en utilisant l'opacité : 0 ;.
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：
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
Article précédent：Comment obtenir un curseur d'image en boucle infinie transparente à l'aide de JavaScript/jQuery ?Article suivant：Comment obtenir un curseur d'image en boucle infinie transparente à l'aide de JavaScript/jQuery ?