Comment puis-je personnaliser le style des boutons de téléchargement de fichiers dans les navigateurs sans JavaScript ?

Personnalisation du style des boutons de téléchargement de fichiers dans les navigateurs

La personnalisation de l'apparence des boutons de téléchargement de fichiers peut être difficile sans recourir à JavaScript. Cependant, il existe une technique simple et efficace qui exploite la balise label pour obtenir les résultats souhaités.

En utilisant la balise Balise

Le La balise fournit un moyen d'associer une étiquette de texte à une entrée de formulaire. En insérant une entrée de téléchargement de fichier masquée dans une étiquette, vous pouvez toujours capturer les événements de clic dans l'étiquette et les rediriger vers l'entrée masquée.

Style CSS

Une fois le L'entrée de téléchargement de fichier est masquée, vous pouvez librement styliser l'étiquette environnante en utilisant CSS. Par exemple, le code suivant illustre un bouton de téléchargement de fichier personnalisé :

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

Implémentation HTML

Pour implémenter cette technique en HTML :

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

En utilisant cette approche, vous obtenez un contrôle total sur le style du bouton de téléchargement de fichier, sans aucun JavaScript et sans limitations imposées par les dimensions de saisie définies par le navigateur.

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!