[Html] Styler un type d'entrée = bouton "fichier"



Answers

Vous n'avez pas besoin de JavaScript pour ça! Voici une solution cross-browser:

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

La meilleure approche serait d'avoir un élément label personnalisé avec un attribut for attaché à un élément d'entrée de fichier caché . (L'attribut for l'étiquette doit correspondre à l' id l'élément fichier pour 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 enrouler directement l'élément d'entrée de fichier avec une étiquette: (example)

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

En termes de style, cachez simplement 1 l'élément d'entrée en utilisant le sélecteur d'attribut .

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

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

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

1 - Il vaut la peine de noter que si vous masquez l'élément en utilisant display: none , cela ne fonctionnera pas dans IE8 et ci-dessous. Tenez également compte du fait que jQuery validate ne valide pas les champs cachés par défaut. Si l'une ou l'autre de ces choses est un problème pour vous, voici deux méthodes différentes pour masquer l'entrée ( 1 , 2 ) qui fonctionne dans ces circonstances.

Question

Comment styler le type="file" entrée type="file" bouton type="file" .




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

Je suis tombé sur ce problème récemment et malgré la pléthore de réponses sur , aucun ne semblait vraiment correspondre à la facture. Au final, j'ai fini par customiser cela pour 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!!!




These answers are nice, and they all work for very specific use cases. That is to say, they are opinionated.

So, here's an answer that assumes nothing, but will work no matter how you modify it. You can change design with css, add javascript to maybe show a file name on change, etc. it will still always work.

Code:

Here is the core css

.file-input{
  pointer-events: none;
  position: relative;
  overflow: hidden;
}
.file-input > * {
  pointer-events: none;
}
.file-input > input[type="file"]{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: all;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

and the core html:

<div class="file-input">
  <input type="file"/>
</div>

As you can see, we are forcing any pointer event(click) that happens on the .file-input element, or any of its children, to be proxied to the file input. This is because the file input is positioned absolute and will consume the width/height of the container always. You can therefore customize to fit your need. style the wrapper into a button, use some js to display file name on select, etc. nothing will break so long as the above core code remains intact.

Comme vous le verrez dans la démo, j'ai ajouté un spantexte avec "Select file" et une classe avec des styles supplémentaires pour styliser la .file-inputdiv. Cela devrait être le point de départ canonique pour quiconque a l'intention de créer un élément de téléchargement de fichier personnalisé.

Démonstration: JSFIDDLE




Ne vous laissez pas berner par de «super» solutions CSS uniquement spécifiques au navigateur, ou qui superposent le bouton stylé au dessus du vrai bouton, ou qui vous forcent à utiliser un <label> au lieu d'un <button> , ou tout autre hack. JavaScript est nécessaire pour le faire fonctionner pour un usage général. S'il vous plaît étudier comment Gmail et DropZone le faire si vous ne me croyez pas.

Tapez 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 caché à votre bouton stylé.

<!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>

Notez comment le code ci-dessus le re-lie 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 voulez probablement obtenir le fichier chaque fois que l'utilisateur le fournit.




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



Ici, nous utilisons un span pour déclencher l'entrée du fichier de type et nous avons simplement personnalisé ce span , de sorte que nous pouvons ajouter n'importe quel style de cette façon.

Notez que nous utilisons la balise d'entrée avec visibilité: option cachée et la déclenche 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>

Reference




C'est simple avec jquery. Pour donner un exemple de code de la suggestion de 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">

Veillez à définir le style sur l'entrée lorsque vous êtes prêt: opacity: 0 Vous ne pouvez pas définir l' display: none car il doit être cliquable. Mais vous pouvez le placer sous le "nouveau" bouton ou l'insérer sous quelque chose d'autre avec z-index si vous préférez.

Configurez 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 lors de la modification.

$('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 tous être prêts.




Tous les moteurs de rendu génèrent automatiquement un bouton lorsqu'un <input type="file"> est créé. Historiquement, ce bouton a été complètement dénué de style. Cependant, Trident et WebKit ont ajouté des hooks à travers des pseudo-éléments.

Trident

À partir de IE10, le bouton d'entrée de fichier peut être stylé en utilisant le pseudo-élément ::-ms-browse . Fondamentalement, toutes les règles CSS que vous appliquez à un bouton normal 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 sous Windows 8:

WebKit

WebKit fournit un crochet pour son bouton d'entrée de fichier avec le pseudo-élément ::-webkit-file-upload-button . Encore une fois, à peu près n'importe quelle règle CSS peut être appliquée, donc l'exemple Trident fonctionnera ici aussi:

::-webkit-file-upload-button {
  background: black;
  color: red;
  padding: 1em;
}
<input type="file">

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




Peut-être beaucoup de vampires. 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"/>

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




Une solution vraiment intelligente utilisant jQuery qui fonctionne dans tous les anciens navigateurs ainsi que dans les nouveaux, j'ai trouvé here . Il prend soin de tous les problèmes de style et de clic (), en utilisant le bouton de navigation du fichier réel. J'ai fait une version javascript simple: fiddle La solution est aussi simple que genius: rendre l'entrée de fichier invisible, et utiliser un morceau de code pour le placer sous le curseur de souris.

<div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span>
<input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)">
</div>
<div id="result_1" class="result"></div>


function file_ho(e, o, a) {
    e = window.event || e;
    var x = 0,
    y = 0;
    if (o.offsetParent) {
        do {
        x += o.offsetLeft;
        y += o.offsetTop;
        } while (o = o.offsetParent);
    }
var x1 = e.clientX || window.event.clientX;
var y1 = e.clientY || window.event.clientY;
var le = 100 - (x1 - x);
var to = 10 - (y1 - y);
document.getElementById('file_' + a).style.marginRight = le + 'px';
document.getElementById('file_' + a).style.marginTop = -to + 'px';
}

.inp_field_12 {
position:relative;
overflow:hidden;
float: left;
width: 130px;
height: 30px;
background: orange;
}
.inp_field_12 span {
position: absolute;
width: 130px;
font-family:'Calibri', 'Trebuchet MS', sans-serif;
font-size:17px;
line-height:27px;
text-align:center;
color:#555;
}
.inp_field_12 input[type='file'] {
cursor:pointer;
cursor:hand;
position: absolute;
top: 0px;
right: 0px;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
outline: none;
outline-style:none;
outline-width:0;
ie-dummy: expression(this.hideFocus=true);
}
.inp_field_12:hover {
background-position:-140px -35px;
}
.inp_field_12:hover span {
color:#fff;
}



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/




Cachez-le avec css et utilisez un bouton personnalisé avec $ (sélecteur) .click () 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 sera effacé 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;
    });
});



Update Nevermind, this doesn't work in IE or it's new brother, FF. Works on every other type of element as expected, but doesn't work on file inputs. A much better way to do this is to just create a file input and a label that links to it. Make the file input display none and boom, it works in IE9+ seamlessly.

Warning: Everything below this is crap!

By using pseudo elements positioned/sized against their container, we can get by with only one input file (no additional markup needed), and style as per usual.

Demo

<input type="file" class="foo">

.foo {
    display: block;
    position: relative;
    width: 300px;
    margin: auto;
    cursor: pointer;
    border: 0;
    height: 60px;
    border-radius: 5px;
    outline: 0;
}
.foo:hover:after {
    background: #5978f8;
}
.foo:after {
    transition: 200ms all ease;
    border-bottom: 3px solid rgba(0,0,0,.2);
    background: #3c5ff4;
    text-shadow: 0 2px 0 rgba(0,0,0,.2);
    color: #fff;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    content: 'Upload Something';
    line-height: 60px;
    border-radius: 5px;
}

Enjoy guys!

Old Update

Turned this into a Stylus mixin. Should be easy enough for one of you cool SCSS cats to convert it.

file-button(button_width = 150px)
  display block
  position relative
  margin auto
  cursor pointer
  border 0
  height 0
  width 0
  outline none
  &:after
    position absolute
    top 0
    text-align center
    display block
    width button_width
    left -(button_width / 2)

Usage:

<input type="file">

input[type="file"]
    file-button(200px)



J'ai trouvé une méthode très simple pour passer le bouton de fichier à une image. Vous venez d'étiqueter une image et de le 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.




la seule façon dont je peux penser est de trouver le bouton avec javascript une fois qu'il est rendu et lui assigner un style

vous pourriez aussi regarder www.quirksmode.org/dom/inputfile.html




Links