Comment puis-je styliser les boutons de téléchargement de fichiers dans Twitter Bootstrap ?

Style du bouton de téléchargement de fichiers dans Twitter Bootstrap

Il est surprenant que Twitter Bootstrap ne dispose pas d'un bouton de téléchargement esthétique. La question se pose de savoir si cet élément peut être personnalisé à l'aide de CSS.

Personnalisation à l'aide de HTML et CSS

Pour Bootstrap 3, 4 et 5, un contrôle d'entrée de fichier fonctionnel qui ressemble à un bouton peut être créé avec HTML seul :

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

Cette approche exploite l'attribut caché dans HTML5. Pour les navigateurs qui ne prennent pas en charge cet attribut, assurez-vous d'inclure le CSS suivant :

[hidden] {
  display: none !important;
}

Approche héritée pour les anciens IE

Pour prendre en charge IE8 et versions antérieures, HTML Des modifications /CSS sont requises :

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

Ce CSS résout les problèmes avec l'ancien IE en rendant la saisie du fichier pleine largeur/hauteur dans la plage et invisible.

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!