Comment stylisez-vous un type="file"bouton de saisie ?

Le style des entrées de fichier est notoirement difficile, car la plupart des navigateurs ne changeront pas l'apparence de CSS ou de javascript.

Même la taille de l'entrée ne répondra pas aux goûts de:

<input type="file" style="width:200px">

À la place, vous devrez utiliser l'attribut size:

<input type="file" size="60" />

Pour tout style plus sophistiqué que cela (par exemple, changer l'apparence du bouton de navigation), vous devrez examiner l'approche délicate de superposer un bouton de style et une zone de saisie au-dessus de l'entrée de fichier native. L'article déjà mentionné par rm sur www.quirksmode.org/dom/inputfile.html est le meilleur que j'ai vu.

MISE À JOUR

Bien qu'il soit difficile de <input>styliser directement une balise, cela est facilement possible à l'aide d'une <label>balise. Voir la réponse ci-dessous de @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

Vous n'avez pas besoin de JavaScript pour cela! Voici une solution multi-navigateur:

Voir cet exemple! - Il fonctionne dans Chrome / FF / IE - (IE10 / 9/8/7)

La meilleure approche serait d'avoir un élément d'étiquette personnalisé avec un forattribut attaché à un élément d'entrée de fichier caché . (L' forattribut de l'étiquette doit correspondre à celui de l'élément de fichier idpour que cela fonctionne).

<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

Comme alternative, vous pouvez également envelopper directement l'élément d'entrée de fichier avec une étiquette: (exemple)

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

En termes de style, il suffit de masquer ¹ l'élément d'entrée à l'aide du sélecteur d'attribut .

input[type="file"] {
    display: none;
}

Ensuite, tout ce que vous devez faire est de styliser l' labelélément personnalisé . (exemple) .

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

¹ - Il convient de noter que si vous masquez l'élément à l'aide display: none, il ne fonctionnera pas dans IE8 et les versions antérieures. Sachez également que jQuery validate ne valide pas les champs masqués par défaut. Si l'une de ces choses vous pose problème, voici deux méthodes différentes pour masquer l'entrée ( 1 , 2 ) qui fonctionne dans ces circonstances.

suivez ces étapes, vous pouvez créer des styles personnalisés pour votre formulaire de téléchargement de fichiers:

1. c'est le simple formulaire HTML (veuillez lire les commentaires HTML que j'ai écrits ci-dessous)

   <form action="#type your action here" method="POST" enctype="multipart/form-data">
     <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
     <!-- this is your file input tag, so i hide it!-->
     <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
     <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
     <input type="submit" value='submit' >
   </form>

2. puis utilisez ce script simple pour passer l'événement click à la balise d'entrée de fichier.

   function getFile(){
        document.getElementById("upfile").click();
   }

   Vous pouvez désormais utiliser n'importe quel type de style sans vous soucier de la façon de modifier les styles par défaut.

Je le sais très bien car j'essaie de changer les styles par défaut depuis un mois et demi. croyez-moi, c'est très difficile car différents navigateurs ont des balises d'entrée de téléchargement différentes. Utilisez donc celui-ci pour créer vos formulaires de téléchargement de fichiers personnalisés. Voici le code de TÉLÉCHARGEMENT AUTOMATISÉ complet.

function getFile() {
  document.getElementById("upfile").click();
}

function sub(obj) {
  var file = obj.value;
  var fileName = file.split("\\");
  document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
  document.myForm.submit();
  event.preventDefault();
}

#yourBtn {
  position: relative;
  top: 150px;
  font-family: calibri;
  width: 150px;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: 1px dashed #BBB;
  text-align: center;
  background-color: #DDD;
  cursor: pointer;
}

<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
  <div id="yourBtn" onclick="getFile()">click to upload a file</div>
  <!-- this is your file input tag, so i hide it!-->
  <!-- i used the onchange event to fire the form submission-->
  <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div>
  <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
  <!-- <input type="submit" value='submit' > -->
</form>

Cachez-le avec css et utilisez un bouton personnalisé avec $ (sélecteur) .cliquez sur () pour activer le bouton de navigation. puis définissez un intervalle pour vérifier la valeur du type d'entrée de fichier. l'intervalle peut afficher la valeur pour l'utilisateur afin que l'utilisateur puisse voir ce qui est téléchargé. l'intervalle s'effacera lorsque le formulaire sera soumis [EDIT] Désolé, j'ai été très occupé à mettre à jour ce post, voici un exemple

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- filename to display to the user -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Hide this from the users view with css display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Style this button with type image or css whatever you wish -->
    <input id="browse-click" type="button" class="button" value="Browse for files"/>

    <!-- submit button -->
    <input type="submit" class="button" value="Change"/>
</div>

$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
        $('#file-type').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});

HTML

<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>

CSS

.new_Btn {
// your css propterties
}

#html_btn {
 display:none;
}

jQuery

$('.new_Btn').bind("click" , function () {
        $('#html_btn').click();
    });
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery

Violon : http://jsfiddle.net/M7BXC/

Vous pouvez également atteindre vos objectifs sans jQuery avec JavaScript normal.

Maintenant, le newBtn est lié au html_btn et vous pouvez styler votre nouveau btn comme vous le souhaitez: D

Tous les moteurs de rendu génèrent automatiquement un bouton lors de la création d'un <input type="file">. Historiquement, ce bouton n'a pas été stylisé. Cependant, Trident et WebKit ont ajouté des crochets via des pseudo-éléments.

Trident

Depuis IE10, le bouton d'entrée de fichier peut être stylisé à l'aide du ::-ms-browsepseudo-élément. Fondamentalement, toutes les règles CSS que vous appliquez à un bouton standard peuvent être appliquées au pseudo-élément. Par exemple:

::-ms-browse {
  background: black;
  color: red;
  padding: 1em;
}

<input type="file">

Cela s'affiche comme suit dans IE10 sur Windows 8:

WebKit

WebKit fournit un crochet pour son bouton d'entrée de fichier avec le ::-webkit-file-upload-buttonpseudo-élément. Encore une fois, presque toutes les règles CSS peuvent être appliquées, par conséquent l'exemple Trident fonctionnera également ici:

::-webkit-file-upload-button {
  background: black;
  color: red;
  padding: 1em;
}

<input type="file">

Cela s'affiche comme suit dans Chrome 26 sur OS X:

Si vous utilisez Bootstrap 3, cela a fonctionné pour moi:

Voir http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<span class="btn btn-primary btn-file">
    Browse...<input type="file">
</span>

Ce qui produit le bouton d'entrée de fichier suivant:

Sérieusement, consultez http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

Exemple de travail ici avec prise en charge native du glisser-déposer: https://jsfiddle.net/j40xvkb3/

Lors du style d'une entrée de fichier, vous ne devez interrompre aucune des interactions natives fournies par l'entrée .

L' display: noneapproche rompt le support natif du glisser-déposer.

Pour ne rien casser, vous devez utiliser l' opacity: 0approche pour l'entrée et la positionner en utilisant un modèle relatif / absolu dans un wrapper.

En utilisant cette technique, vous pouvez facilement styliser une zone de clic / dépôt pour l'utilisateur et ajouter une classe personnalisée en javascript sur dragenterévénement pour mettre à jour les styles et donner à l'utilisateur un retour pour lui permettre de voir qu'il peut déposer un fichier.

HTML:

<label for="test">
  <div>Click or drop something here</div>
  <input type="file" id="test">
</label>

CSS:

input[type="file"] {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  border: 3px dotted #bebebe;
  border-radius: 10px;
}

label {
  display: inline-block;
  position: relative;
  height: 100px;
  width: 400px;
}

Voici un exemple de travail (avec JS supplémentaire pour gérer les dragoverévénements et les fichiers déposés).

https://jsfiddle.net/j40xvkb3/

J'espère que cela vous a aidé!

Je peux le faire avec du CSS pur en utilisant le code ci-dessous. J'ai utilisé bootstrap et font-awesome.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<label class="btn btn-default btn-sm center-block btn-file">
  <i class="fa fa-upload fa-2x" aria-hidden="true"></i>
  <input type="file" style="display: none;">
</label>

 <label>
    <input type="file" />
 </label>

Vous pouvez envelopper votre type d'entrée = "fichier" à l'intérieur d'une étiquette pour l'entrée. Donnez un style à l'étiquette comme vous le souhaitez et masquez l'entrée avec display: none;

Voici une solution qui ne stylise pas vraiment l' <input type="file" />élément mais utilise à la place un <input type="file" />élément au-dessus d'autres éléments (qui peuvent être stylisés). L' <input type="file" />élément n'est pas vraiment visible par conséquent, l'illusion générale est d'un contrôle de téléchargement de fichiers bien conçu.

J'ai rencontré ce problème récemment et malgré la pléthore de réponses sur Stack Overflow, aucune ne semblait vraiment correspondre à la facture. Au final, j'ai fini par le personnaliser afin d'avoir une solution simple et élégante.

J'ai également testé cela sur Firefox, IE (11, 10 et 9), Chrome et Opera, iPad et quelques appareils Android.

Voici le lien JSFiddle -> http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) {
    $in = $(this);
    $in.next().html($in.val());
    
});

$('.uploadButton').click(function() {
    var fileName = $("#fileUpload").val();
    if (fileName) {
        alert(fileName + " can be uploaded.");
    }
    else {
        alert("Please select a file to upload");
    }
});

body {
    background-color:Black;
}

div.upload {
    background-color:#fff;
    border: 1px solid #ddd;
    border-radius:5px;
    display:inline-block;
    height: 30px;
    padding:3px 40px 3px 3px;
    position:relative;
    width: auto;
}

div.upload:hover {
    opacity:0.95;
}

div.upload input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;
    opacity: 0;
    cursor:pointer;
    position:absolute;
    left:0;
}
.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor:pointer;
    display: inline-block;
    height: 30px;
    margin-right:15px;
    width: auto;
    padding:0 20px;
    box-sizing: content-box;
}

.fileName {
    font-family: Arial;
    font-size:14px;
}

.upload + .uploadButton {
    height:38px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
        <input type="button" class="uploadButton" value="Browse" />
        <input type="file" name="upload" accept="image/*" id="fileUpload" />
        <span class="fileName">Select file..</span>
    </div>
    <input type="button" class="uploadButton" value="Upload File" />
</form>

J'espère que cela t'aides!!!

C'est simple avec jquery. Pour donner un exemple de code de la suggestion de Ryan avec une légère modification.

HTML de base:

<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">

Assurez-vous de définir le style sur l'entrée lorsque vous êtes prêt: opacity: 0 vous ne pouvez pas définir display: nonecar il doit être cliquable. Mais vous pouvez le positionner sous le bouton "nouveau" ou rentrer sous autre chose avec z-index si vous préférez.

Configurez du jquery pour cliquer sur l'entrée réelle lorsque vous cliquez sur l'image.

$('#image_icon').click(function() {
    $('#the_real_file_input').click();
});

Maintenant, votre bouton fonctionne. Il suffit de couper et coller la valeur lorsqu'elle est modifiée.

$('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
}).change();

Tah dah! Vous devrez peut-être analyser le val () pour quelque chose de plus significatif, mais vous devriez être prêt.

Mettez le bouton de téléchargement de fichier sur votre joli bouton ou élément et cachez-le.

Très simple et fonctionnera sur n'importe quel navigateur

<div class="upload-wrap">
    <button type="button" class="nice-button">upload_file</button>
    <input type="file" name="file" class="upload-btn">
</div>

modes

.upload-wrap {
    position: relative;
}

.upload-btn {
    position: absolute;
    left: 0;
    opacity: 0;
}

VISIBILITÉ: TRICK caché

Je fais généralement le visibility:hiddentour

c'est mon bouton stylisé

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

il s'agit du bouton type d'entrée = fichier. Notez la visibility:hiddenrègle

<input type="file" id="upload" style="visibility:hidden;">

c'est le bit JavaScript pour les coller ensemble. Ça marche

<script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>

la seule façon dont je peux penser est de trouver le bouton avec javascript après son rendu et de lui attribuer un style

vous pourriez également regarder ce résumé

<input type="file" name="media" style="display-none" onchange="document.media.submit()">

J'utiliserais normalement du javascript simple pour personnaliser la balise d'entrée de fichier. Un champ de saisie caché, en cliquant sur le bouton, javascript appelle le champ caché, une solution simple sans aucun CSS ou tas de jquery.

<button id="file" onclick="$('#file').click()">Upload File</button>

Ici, nous utilisons une étendue pour déclencher l'entrée du fichier de type et nous avons simplement personnalisé cette étendue , afin que nous puissions ajouter n'importe quel style en utilisant cette méthode.

Notez que nous utilisons une balise d'entrée avec l'option visibilité: cachée et la déclenchons dans l'intervalle.

.attachFileSpan{
color:#2b6dad;
cursor:pointer;
}
.attachFileSpan:hover{
text-decoration: underline;
}

<h3> Customized input of type file </h3>
<input id="myInput" type="file" style="visibility:hidden"/>

        <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()">
        Attach file
        </span>

Référence

C'est une bonne façon de le faire avec le téléchargement de matériel / fichier angulaire. Vous pouvez faire de même avec un bouton d'amorçage.

Remarque que j'ai utilisé à la <a>place de <button>cela permet aux événements de clic de bouillonner.

<label>
    <input type="file" (change)="setFile($event)" style="display:none" />

    <a mat-raised-button color="primary">
      <mat-icon>file_upload</mat-icon>
      Upload Document
    </a>

  </label>

SEULEMENT CSS

Utilisez ce très simple et FACILE

Html:

<label>Attach your screenshort</label>
                <input type="file" multiple class="choose">

Css:

.choose::-webkit-file-upload-button {
    color: white;
    display: inline-block;
    background: #1CB6E0;
    border: none;
    padding: 7px 15px;
    font-weight: 700;
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 10pt;
}

Peut-être beaucoup d'awns. Mais j'aime ça en CSS pur avec des fa-boutons:

.divs {
    position: relative;
    display: inline-block;
    background-color: #fcc;
}

.inputs {
    position:absolute;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #00f;
    z-index:999;
}

.icons {
    position:relative;
}

<div class="divs">
<input type='file' id='image' class="inputs">
<i class="fa fa-image fa-2x icons"></i>
</div>

<div class="divs">
<input type='file' id='book' class="inputs">
<i class="fa fa-book fa-5x icons"></i>
</div>
<br><br><br>
<div class="divs">
<input type='file' id='data' class="inputs">
<i class="fa fa-id-card fa-3x icons"></i>
</div>





<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Violon: https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/

Ne vous laissez pas berner par les "excellentes" solutions CSS uniquement qui sont en fait très spécifiques au navigateur, ou qui superposent le bouton stylé au-dessus du vrai bouton, ou qui vous obligent à utiliser un <label>au lieu d'un <button>, ou tout autre hack . JavaScript EST nécessaire pour le faire fonctionner pour une utilisation générale. Veuillez étudier comment gmail et DropZone le font si vous ne me croyez pas.

Stylisez simplement un bouton normal comme vous le souhaitez, puis appelez une simple fonction JS pour créer et lier un élément d'entrée masqué à votre bouton stylisé.

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    button {
        width            : 160px;
        height           : 30px;
        font-size        : 13px;
        border           : none;
        text-align       : center;
        background-color : #444;
        color            : #6f0;
    }
    button:active {
        background-color : #779;
    }
</style>

<button id="upload">Styled upload button!</button>

<script>

function Upload_On_Click(id, handler) {
    var hidden_input = null;
    document.getElementById(id).onclick = function() {hidden_input.click();}
    function setup_hidden_input() {
        hidden_input && hidden_input.parentNode.removeChild(hidden_input);
        hidden_input = document.createElement("input");
        hidden_input.setAttribute("type", "file");
        hidden_input.style.visibility = "hidden";
        document.querySelector("body").appendChild(hidden_input);
        hidden_input.onchange = function() {
            handler(hidden_input.files[0]);
            setup_hidden_input();
        };
    }
    setup_hidden_input();
}

Upload_On_Click("upload", function(file) {
    console.log("GOT FILE: " + file.name);
});

</script>

Remarquez comment le code ci-dessus le lie de nouveau après chaque fois que l'utilisateur choisit un fichier. Ceci est important car "onchange" n'est appelé que si l'utilisateur change le nom du fichier. Mais vous voudrez probablement obtenir le fichier chaque fois que l'utilisateur le fournira.

Solution de fichiers multiples avec nom de fichier converti

EXEMPLE Bootstrap

HTML:

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file1" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file2" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

1. JS avec jQuery:

$().ready(function($){
    $('.search-file-btn').children("input").bind('change', function() {
    var fileName = '';
    fileName = $(this).val().split("\\").slice(-1)[0];
    $(this).parent().next("span").html(fileName);
  })
});

2. JS sans jQuery

Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
  item.addEventListener("change", function() {
    var fileName = '';
    fileName = this.value.split("\\").slice(-1)[0];
    this.parentNode.nextElementSibling.innerHTML = fileName;
  });
});

Voici une solution, qui montre également le nom de fichier choisi: http://jsfiddle.net/raft9pg0/1/

HTML:

<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>

JS:

$(function() {
    $("input:file[id=file-upload]").change(function() {
        $("#file-upload-value").html( $(this).val() );
    });
});

CSS:

input[type="file"] {
    display: none;
}

.custom-file-upload {
      background: #ddd;
      border: 1px solid #aaa;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      color: #444;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      text-decoration: none;
      text-shadow: 0 1px rgba(255, 255, 255, .75);
      cursor: pointer;
      margin-bottom: 20px;
      line-height: normal;
      padding: 8px 10px; }

Cette semaine, j'ai également dû personnaliser le bouton et afficher le nom de fichier sélectionné à côté, donc après avoir lu certaines des réponses ci-dessus (merci BTW), j'ai trouvé l'implémentation suivante:

HTML:

<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>

CSS

   input[type='file'] {
    color: #a1bbd5;
    display: none;

}

.custom-file-upload {
    border: 1px solid #a1bbd5;
    display: inline-block;
    padding: 2px 8px;
    cursor: pointer;
}

label{
    color: #a1bbd5;
    border-radius: 3px;
}

Javascript (angulaire)

app.controller('MainCtrl', function($scope) {

        $scope.fileName = 'No file chosen';

          $scope.onFileSelect = function ($files) {
          $scope.selectedFile = $files;
          $scope.fileName = $files[0].name;
    };
});

Fondamentalement, je travaille avec la bibliothèque ng-file-upload, angulairement, je lie le nom de fichier à ma portée $ et lui donne la valeur initiale de 'Aucun fichier choisi', je lie également la fonction onFileSelect () à ma portée, donc quand un fichier est sélectionné, j'obtiens le nom de fichier en utilisant l'API ng-upload et l'assigne au $ scope.filename.

Simulez simplement un clic sur le <input>en utilisant la trigger()fonction lorsque vous cliquez sur un style <div>. J'ai créé mon propre bouton à partir d'un <div>, puis j'ai déclenché un clic sur inputlorsque je clique sur mon <div>. Cela vous permet de créer votre bouton comme vous le souhaitez car il s'agit d'un <div>et simule un clic sur votre fichier <input>. Ensuite, utilisez display: nonesur votre <input>.

// div styled as my load file button
<div id="simClick">Load from backup</div>

<input type="file" id="readFile" />

// Click function for input
$("#readFile").click(function() {
    readFile();
});

// Simulate click on the input when clicking div
$("#simClick").click(function() {
    $("#readFile").trigger("click");
});

La meilleure façon est d'utiliser le pseudo-élément: après ou: avant comme élément sur l'entrée de dé. Ensuite, stylisez ce pseudo-élément comme vous le souhaitez. Je vous recommande de faire comme style général pour tous les fichiers d'entrée comme suit:

input {
  height: 0px;
  outline: none;
}

input[type="file"]:before {
  content: "Browse";
  background: #fff;
  width: 100%;
  height: 35px;
  display: block;
  text-align: left;
  position: relative;
  margin: 0;
  margin: 0 5px;
  left: -6px;
  border: 1px solid #e0e0e0;
  top: -1px;
  line-height: 35px;
  color: #b6b6b6;
  padding-left: 5px;
  display: block;
}

Le meilleur moyen que j'ai trouvé est de le input type: filerégler sur display: none. Donnez-lui un id. Créez un bouton ou tout autre élément pour ouvrir l'entrée de fichier.

Ajoutez ensuite un écouteur d'événements (bouton) qui, lorsque vous cliquez dessus, simule un clic sur l'entrée du fichier d'origine. Comme cliquer sur un bouton nommé bonjour mais cela ouvre une fenêtre de fichier.

Exemple de code

//i am using semantic ui

<button class="ui circular icon button purple send-button" id="send-btn">
      <i class="paper plane icon"></i>
    </button>
  <input type="file" id="file" class="input-file" />

javascript

var attachButton=document.querySelector('.attach-button');
    attachButton.addEventListener('click', e=>{
        $('#file').trigger("click")
    })

css peut faire beaucoup ici ... avec un peu de ruse ...

<div id='wrapper'>
  <input type='file' id='browse'>
</div>

#wrapper {
     width: 93px; /*play with this value */
     height: 28px; /*play with this value */
     background: url('browseBtn.png') 0 0 no-repeat;
     border:none;
     overflow:hidden;
}

#browse{
     margin-left:-145px; /*play with this value */
     opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

:: référence :: http://site-o-matic.net/?viewpost=19

-une abbaye

J'ai trouvé une méthode très simple pour basculer le bouton de fichier sur une image. Vous venez d'étiqueter une image et de la placer sur le bouton du fichier.

<html>
<div id="File button">
    <div style="position:absolute;">
        <!--This is your labeled image-->
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>

Lorsque vous cliquez sur l'image étiquetée, vous sélectionnez le bouton de fichier.

Seule cette approche vous donne toute la flexibilité! ES6 / VanillaJS!

html:

<input type="file" style="display:none;"></input>
<button>Upload file</button>

javascript:

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('input[type="file"]').click();
});

Cela masque le bouton du fichier d'entrée, mais sous le capot, il clique sur un autre bouton normal, que vous pouvez évidemment styler comme n'importe quel autre bouton. C'est la seule solution sans inconvénient en dehors d'un nœud DOM inutile. Grâce à display:none;, le bouton de saisie ne réserve aucun espace visible dans le DOM.

(Je ne sais plus à qui donner des accessoires pour cela. Mais j'ai eu cette idée quelque part ici sur Stackoverflow.)