Comment puis-je styliser les contrôles de fichiers d'entrée avec CSS3 et JavaScript/jQuery ?

Style du contrôle de fichier d'entrée avec CSS3 et JavaScript/jQuery

Malgré sa fonctionnalité inhérente, le contrôle de fichier d'entrée est souvent insuffisant en termes d'attrait visuel. CSS3 offre des capacités limitées pour styliser cet élément, mais avec l'aide de JavaScript ou de jQuery, vous pouvez améliorer son apparence et l'aligner sur votre conception.

Utiliser CSS pour améliorer l'apparence des boutons

Bien que CSS3 ne puisse à lui seul modifier l'apparence fondamentale du bouton du fichier d'entrée, il peut être utilisé pour influencer son conteneur. Par exemple, vous pouvez définir une couleur d'arrière-plan personnalisée ou un rayon de bordure pour un div englobant :

.input-file-container {
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}

Ouverture de la boîte de dialogue Parcourir à l'aide d'un div stylisé

Vous pouvez également créer un div visuellement attrayant qui , lorsque vous cliquez dessus, déclenche la boîte de dialogue de navigation dans les fichiers. Voici comment :

HTML
Créez un élément de fichier d'entrée masqué et un div stylisé qui fera office de bouton cliquable.

<div>
<p><strong>CSS </strong><br>Stylez le div pour qu'il ressemble à un bouton.</p>
<pre class="brush:php;toolbar:false">#file-button {
  cursor: pointer;
  background-color: #000;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}

JavaScript/jQuery
Liez un gestionnaire d'événements au div pour ouvrir la boîte de dialogue de navigation dans les fichiers lorsque vous cliquez dessus.

$('#file-button').click(function() {
  $('#file-input').click();
});

Cette approche offre plus de flexibilité dans le style du contrôle du fichier d'entrée et vous permet de l'adapter à l'esthétique globale de votre conception.