Comment puis-je personnaliser l'apparence du bouton de saisie de fichier de Bootstrap ?

Améliorez Bootstrap avec un bouton de saisie de fichier personnalisé

Malgré sa popularité, Twitter Bootstrap ne dispose actuellement pas d'un bouton de téléchargement d'éléments de fichier visuellement attrayant. Bien que le bouton reste un élément natif du navigateur qui semble intouchable par CSS, il existe des solutions viables pour personnaliser son apparence.

Bootstrap 3-5 : Une solution HTML simple

En tirant parti du HTML seul, vous pouvez créez un contrôle de saisie de fichier fonctionnel ressemblant à un bouton :

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

Les navigateurs modernes, y compris IE9, prennent facilement en charge cette approche. Cependant, pour la compatibilité avec les anciennes versions d'IE, envisagez l'approche héritée suivante.

Approche héritée pour l'ancien IE

Pour prendre en charge IE8 et versions antérieures, utilisez cette combinaison HTML/CSS :

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

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

Cette technique, connue sous le nom de "CSS bloat", compense le manque d'activation de l'entrée de fichier lors du clic sur l'étiquette dans l'ancien IE. par :

• Étendre l'entrée du fichier sur toute la largeur/hauteur de son conteneur
• Masquer l'élément d'entrée du fichier

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!