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

Styliser les boutons de téléchargement de fichiers sans JavaScript

De nombreuses tentatives de personnalisation des boutons de téléchargement de fichiers recourent souvent à l'approche JavaScript ou Quirksmode, qui présente des limites en termes de dimensions et d'ajustements automatiques. Cet article explore une solution moins compliquée utilisant l'attribut

Exploiter la balise Balise

Le L'élément nous permet de styliser les boutons de téléchargement de fichiers sans JavaScript. Il transmet les événements de clic à ses éléments enfants, nous permettant de l'utiliser comme wrapper pour le bouton de téléchargement de fichier caché.

Exemple de code

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

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

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

Dans cet exemple, nous masquons le bouton de téléchargement de fichier en utilisant position:absolute et top:-1000px et stylisez le étiquetez comme vous le souhaitez. L'étiquette reçoit les événements de clic et les transmet au bouton de saisie masqué.

Avantages de cette approche

• Permet une plus grande flexibilité de style par rapport au style intégré du kit Web.
• Aucun JavaScript n'est requis, ce qui le rend plus efficace.
• Il surmonte les limites de l'approche de Quirksmode, permettant au fichier bouton pour remplir tout le conteneur parent.

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!