Comment puis-je styliser les boutons de téléchargement de fichiers dans les navigateurs sans JavaScript ?

Style personnalisé multi-navigateurs pour le bouton de téléchargement de fichiers [dupliquer]

Introduction :

Le style des boutons de téléchargement de fichiers peut être difficile en raison des dimensions définies par le navigateur. Les approches conventionnelles font souvent appel à la technique JavaScript ou Quirksmode, qui peuvent présenter des limites. Ici, nous explorons une solution plus conviviale et plus efficace sans avoir besoin de JavaScript.

Réponse :

Une méthode simple et efficace consiste à utiliser le tag autour d'un bouton de téléchargement de fichier caché.

HTML :

<label class="myLabel">
    <input type="file" required/>
    <span>My Label</span>
</label>

CSS :

label.myLabel input[type="file"] {
    position: absolute;
    top: -1000px;
}

/***** Example custom styling *****/
.myLabel {
    border: 2px solid #AAA;
    border-radius: 4px;
    padding: 2px 5px;
    margin: 2px;
    background: #DDD;
    display: inline-block;
}
.myLabel:hover {
    background: #CCC;
}
.myLabel:active {
    background: #CCF;
}
.myLabel :invalid + span {
    color: #A44;
}
.myLabel :valid + span {
    color: #4A4;
}

Avantages :

• Pas de JavaScript requis
• Permet plus de liberté et de contrôle dans le style
• Prend en charge la compatibilité entre navigateurs sans dimensions d'entrée définies par le navigateur

Cette méthode vous permet de styliser les boutons de téléchargement de fichiers en utilisant sans effort HTML et CSS, offrant une interface utilisateur transparente et une meilleure expérience globale de conception Web.

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!