Comment puis-je créer un bouton de téléchargement de fichier personnalisé avec Bootstrap ?

Bouton de téléchargement de fichier personnalisé à l'aide de Bootstrap

Bien que l'élément d'entrée de fichier par défaut dans Twitter Bootstrap puisse manquer d'attrait esthétique, il est possible de créer un bouton personnalisé qui imite l'apparence du bouton bleu principal.

Solution utilisant HTML :

Pour Bootstrap 3, 4 et 5, une solution HTML simple est disponible :

<label class="btn btn-default">
    Browse <input type="file" hidden>
</label>

Cet élément d'entrée masqué fonctionnera comme un contrôle d'entrée de fichier standard tout en conservant le style de bouton personnalisé.

Approche héritée pour les navigateurs plus anciens :

Si vous avez besoin d'une compatibilité avec IE8 et versions antérieures, utilisez la combinaison HTML/CSS suivante :

HTML :

<span class="btn btn-default btn-file">
    Browse <input type="file">
</span>

CSS :

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

Bien que cette méthode implique du CSS supplémentaire, elle garantit la compatibilité avec les anciens navigateurs IE.

Remarques supplémentaires :

Veuillez noter que le l'entrée de fichier dans la solution HTML repose sur l'attribut caché HTML5. Si vous avez besoin d'une prise en charge de navigateurs encore plus anciens, vous pouvez utiliser l'approche héritée.

Pour plus d'informations et des exemples sur la façon d'afficher les fichiers sélectionnés, reportez-vous à la ressource suivante :

https:/ /www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

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!