Comment puis-je personnaliser l'apparence du bouton de téléchargement du fichier Bootstrap de Twitter ?

Personnalisation du bouton de téléchargement de fichiers Twitter Bootstrap

Malgré l'absence d'un style dédié pour le bouton de téléchargement de fichiers dans Twitter Bootstrap, il existe plusieurs méthodes pour améliorer son apparence.

Une solution, applicable aux versions 3, 4 et 5 de Bootstrap, exploite l'attribut caché HTML5 pour créer un contrôle d'entrée de fichier fonctionnel qui ressemble à un bouton :

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

Cette approche s'appuie sur l'attribut caché, que Bootstrap 4 émule avec CSS pour des raisons de compatibilité. Pour Bootstrap 3, ce CSS supplémentaire peut être requis :

[hidden] {
  display: none !important;
}

Approche héritée pour l'ancien IE :

IE8 et versions antérieures nécessitent une structure HTML/CSS différente :

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

.btn-file {
  /* ... */
}

.btn-file input[type=file] {
  /* ... */
}

Remarques :

• L'ancien IE ne le fait pas autoriser le déclenchement de l'entrée de fichier lors du clic sur l'étiquette.
• Le CSS compense en étendant l'entrée du fichier pour qu'elle corresponde à l'étendue, puis en la masquant.

Pour plus de détails et d'exemples, reportez-vous au blog message d'Abeautifulsite : 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!