Comment puis-je personnaliser le bouton de saisie de fichier dans Twitter Bootstrap ?

Personnalisation du bouton de saisie de fichier dans Twitter Bootstrap

Dans Twitter Bootstrap, l'élément de saisie de fichier n'a pas le design élégant d'un bouton. Cependant, il existe une solution simple pour créer un bouton de téléchargement personnalisable à l'aide de HTML.

Méthode :

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

Cette approche exploite l'attribut HTML5 caché pour créer un contrôle d’entrée de fichier qui apparaît sous la forme d’un bouton. Le style du bouton est hérité de la classe de bouton principale.

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

Pour les navigateurs sans prise en charge des attributs cachés (par exemple, IE8 et versions antérieures), utilisez ce CSS et HTML :

HTML :

<span class="btn btn-primary 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;
}

Cette technique garantit la compatibilité avec les anciennes versions d'IE .

Supplémentaire Informations :

Pour plus de détails et d'exemples, reportez-vous à l'article complet à l'adresse :

https://www.abeautifulsite.net/posts/whipping-file-inputs-into- forme-avec-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!