Style un input type="file" bouton
30 réponses
sont notoirement difficiles, car la plupart des navigateurs ne modifieront pas l'apparence de CSS ou 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 taille:
<input type="file" size="60" />
pour tout style plus sophistiqué que celui-là (par exemple changer l'apparence du bouton browse), vous aurez besoin de regarder l'approche épurée de la superposition d'un bouton stylé et d'une boîte de saisie sur l'entrée du fichier natif. L'article déjà mentionné par rm à www.quirksmode.org/dom/inputfile.html est le meilleur que j'ai vu.
vous n'avez pas besoin de JavaScript pour cela! Voici une solution cross-browser:
voir cet exemple! - il fonctionne en Chrome / FF / IE - (IE10/9/8/7)
la meilleure approche serait d'avoir un élément d'étiquette personnalisé avec un attribut for
attaché à un élément d'entrée de fichier caché . (L'attribut for
du label doit correspondre à l'élément id
du 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 aussi simplement envelopper l'élément d'entrée de fichier avec une étiquette directement: (exemple)
<label class="custom-file-upload">
<input type="file"/>
Custom Upload
</label>
en termes de style, il suffit de masquer 1 l'élément d'entrée en utilisant le sélecteur d'attribut .
input[type="file"] {
display: none;
}
alors tout ce que vous devez faire est le style de la coutume label
élément. (exemple) .
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
1 - il est intéressant de noter que si vous cachez l'élément en utilisant display: none
, il ne fonctionnera pas dans IE8 et en dessous. Sachez également que jQuery valide 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 se cacher l'entrée ( 1 , 2 ) ça marche dans ces circonstances.
suivez ces étapes puis vous pouvez créer des styles personnalisés pour votre formulaire de téléchargement de fichier:
1.) ceci est le formulaire html simple(s'il vous plaît lire les commentaires html que j'ai écrit ici 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 de clic à étiquette d'entrée de fichier.
function getFile(){
document.getElementById("upfile").click();
}
maintenant, vous pouvez utiliser n'importe quel type d'un style sans se soucier de savoir comment changer les styles par défaut. je le sais très bien, parce que j'ai été j'essaie de changer les styles par défaut pour un mois et demi. croyez-moi, c'est très difficile parce que différents navigateurs ont des étiquettes d'entrée de téléchargement différentes. Utilisez donc celui-ci pour construire vos formulaires personnalisés de téléchargement de fichier.Voici le code de téléchargement automatisé complet.
<html>
<head>
<style>
#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;
}
</style>
<script type="text/javascript">
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();
}
</script>
</head>
<body>
<center>
<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>
</center>
</body>
</html>
profitez-en!
Have a Nice Day,
le cacher avec css et utiliser un bouton personnalisé avec $(selector).cliquez sur() pour activer le bouton parcourir. ensuite, définissez un intervalle pour vérifier la valeur du type d'entrée du fichier. l'intervalle peut afficher la valeur pour l'utilisateur, de sorte que l'utilisateur peut voir ce qui se téléchargés. L'intervalle sera clair lorsque le formulaire est soumis [EDIT] Désolé, j'ai été très occupé voulait dire 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
Fiddle : http://jsfiddle.net/M7BXC/
vous pouvez atteindre vos objectifs aussi sans jQuery avec JavaScript normal.
maintenant le newBtn est linkes avec le html_btn et vous pouvez styliser votre nouveau btn comme vous voulez :d
tous les moteurs de rendu génèrent automatiquement un bouton lorsqu'un <input type="file">
est créé. Historiquement, ce bouton n'a jamais été styleable. Cependant, Trident et WebKit ont ajouté des crochets via des pseudo-éléments.
Trident
à partir de IE10, le bouton d'entrée de fichier peut être coiffé en utilisant le pseudo-élément ::-ms-browse
. Fondamentalement, n'importe quelles règles CSS que vous appliquez à un bouton régulier peut être appliqué à la le 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 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 bien:
::-webkit-file-upload-button {
background: black;
color: red;
padding: 1em;
}
<input type="file">
ceci s'affiche comme suit dans Chrome 26 sur OS X:
<label>
<input type="file" />
</label>
vous pouvez envelopper votre type d'entrée=" file " à l'intérieur d'une étiquette pour l'entrée. Style l'étiquette cependant vous souhaitez et cacher l'entrée avec display: none;
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>
qui produit le bouton d'entrée de fichier suivant:
sérieusement, check out http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3 /
je suis en mesure de le faire avec pur CSS à l'aide de 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>
c'est simple avec jquery. Pour donner un exemple de code de Ryan la suggestion 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: none
parce qu'il doit être cliquable. Mais vous pouvez le placer sous le bouton "Nouveau" ou le mettre sous autre chose avec z-index si vous préférez.
le programme d'Installation certains jquery pour cliquer la vraie entrée lorsque vous cliquez sur l'image.
$('#image_icon').click(function() {
$('#the_real_file_input').click();
});
maintenant votre bouton fonctionne. Suffit de couper et coller la valeur lorsqu'elles sont modifiées.
$('input[type=file]').bind('change', function() {
var str = "";
str = $(this).val();
$("#filename").text(str);
}).change();
Tah dah! Vous pouvez avoir besoin de parser le val() à quelque chose de plus significatif mais vous devriez être prêt.
TLDR; Exemple de travail ici avec le soutien de glisser-déposer natif: https://jsfiddle.net/ms3bbazv/4 /
lors de la conception d'une entrée de fichier, vous ne devez briser aucune des interactions natives l'entrée donne.
l'approche display: none
casse le support natif de drag and drop.
pour ne pas casser quoi que ce soit, vous devriez utiliser l'approche opacity: 0
pour l'entrée, et le positionner en utilisant relatif / motif absolu dans un emballage.
en utilisant cette technique, vous pouvez facilement style un click / drop zone pour l'utilisateur, et ajouter 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 des JS supplémentaires pour gérer l'événement dragover
et les fichiers supprimés).
https://jsfiddle.net/ms3bbazv/4 /
Espère que cela a aidé !
VISIBILITY: hidden TRICK
j'opte habituellement pour le visibility:hidden
trick
c'est mon bouton stylé
<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>
c'est le bouton type d'entrée=fichier. Notez le visibility:hidden
règle
<input type="file" id="upload" style="visibility:hidden;">
c'est le bit JavaScript pour les coller ensemble. Il fonctionne
<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 qu'il soit rendu et lui assigner un style
, vous pouvez aussi regarder cet article intitulée
<input type="file" name="media" style="display-none" onchange="document.media.submit()">
j'utiliserais normalement javascript simple pour personnaliser la balise d'entrée de fichier.Un champ d'entrée caché, en cliquant sur le bouton, javascript appeler le champ caché, solution simple avec n'importe quel css ou tas de jquery.
<button id="file" onclick="$('#file').click()">Upload File</button>
Voici une solution qui ne style pas vraiment l'élément <input type="file" />
mais utilise plutôt un élément <input type="file" />
au-dessus d'autres éléments (qui peuvent être stylisés). L'élément <input type="file" />
n'est pas vraiment visible donc, l'illusion générale est un contrôle de téléchargement de fichier de style agréable.
je suis tombé sur ce problème récemment et malgré la pléthore de réponses sur le débordement de la pile, aucun ne semblait vraiment correspondre à la facture. En fin de compte, j'ai fini par personnaliser ceci pour simple et une solution élégante.
j'ai également testé cela sur Firefox, IE (11, 10 & 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>
Espérons que cette aide!!!
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 eu besoin de personnaliser le bouton et d'afficher le nom de fichier sélectionné à part elle, donc après la lecture de certaines des réponses ci-dessus (merci BTW) je suis venu avec 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 (Angular)
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 ng-file-upload lib, angle-wise je lie le nom de fichier à mon $ scope et donner c'est la valeur initiale de 'No file chosen', je lie également la fonction onFileSelect() à mon scope, donc quand un fichier est sélectionné, je reçois le nom du fichier en utilisant l'API ng-upload et je l'attribue à $scope.filename.
peut-être beaucoup d'aubergistes. Mais j'aime cela dans CSS pur avec fa-buttons:
.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"/>
c'est une bonne façon de le faire avec le téléchargement de fichier matériel / angulaire. Vous pourriez faire la même chose avec un bouton bootstrap.
Note j'ai utilisé <a>
au lieu de <button>
cela permet aux événements de clic à faire des bulles.
<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>
ici, nous utilisons une portée pour déclencher l'entrée du fichier de type et nous avons simplement personnalisé cette portée , de sorte que nous pouvons ajouter n'importe quel style en utilisant cette façon.
Note que nous utilisons l'étiquette d'entrée avec visibility:hidden option et que nous la déclenchons dans la portée.
.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>
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
-Abbaye
j'ai trouvé une méthode très simple pour passer le bouton fichier à une image. Il suffit d'étiqueter une image et de la placer sur le bouton file.
<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>
en cliquant sur l'image étiquetée, vous sélectionnez le bouton fichier.
SEULEMENT CSS
utiliser 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;
}
ne vous laissez pas duper par les" grandes "solutions CSS-seulement qui sont en fait très spécifiques au navigateur, ou qui superposent le bouton stylé sur le bouton réel, ou qui vous forcent à utiliser un <label>
au lieu d'un <button>
, ou tout autre piratage de ce genre. JavaScript est nécessaire pour le faire fonctionner pour l'usage général. S'il vous plaît, étudiez comment gmail et DropZone le font si vous ne me croyez pas.
il suffit de styliser un bouton normal comme vous voulez, puis appeler une fonction JS simple pour créer et liez 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>
Remarquez comment le code ci-dessus re-relie 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 css simple, qui crée une zone cible cohérente, et vous permet de coiffer vos faux éléments comme vous le souhaitez.
l'idée de base est celle-ci:
- ont deux éléments "faux" (une entrée de texte/Lien) comme frères et sœurs à votre entrée de fichier réelle. Positionnez-les de façon à ce qu'ils soient exactement au-dessus de votre zone cible.
- enveloppez votre entrée de fichier avec un div. Définir overflow à hidden (de sorte que l'entrée de fichier ne se renverse), et de faire exactement la même taille que vous voulez que votre zone cible.
- définit l'opacité à 0 sur l'entrée du fichier de sorte qu'il est caché mais toujours cliquable. Lui donner une grande taille de police de sorte que vous pouvez cliquer sur toutes les parties de la zone cible.
voici le jsfiddle: http://jsfiddle.net/gwwar/nFLKU /
<form>
<input id="faux" type="text" placeholder="Upload a file from your computer" />
<a href="#" id="browse">Browse </a>
<div id="wrapper">
<input id="input" size="100" type="file" />
</div>
</form>
une solution vraiment intelligente en utilisant jQuery qui fonctionne dans tous les navigateurs plus anciens ainsi que dans les nouveaux, j'ai trouvé ici . Il s'occupe de tous les problèmes de style et click (), en utilisant le bouton fichier browse. J'ai fait une version javascript simple: fiddle La solution est aussi simple que le génie: rendre le fichier d'entrée invisible, et utiliser un morceau de code pour le placer sous le mousecursor.
<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;
}
dans le cas où vous êtes à la recherche d'une bibliothèque javascript - hors de la solution de boîte, jQuery-fileinput fonctionne très bien.
mise à Jour tant pis, cela ne fonctionne pas dans IE ou c'est nouveau frère, FF. Fonctionne sur tous les autres types d'éléments comme prévu, mais ne fonctionne pas sur les entrées de fichier. Une bien meilleure façon de le faire est de créer un fichier d'entrée et une étiquette que des liens vers elle. Faire l'entrée de fichier afficher aucun et boom, il fonctionne dans IE9+ seamlessly.
avertissement: Tout ce qui est en dessous est de la merde!
en utilisant des pseudo-éléments positionnés / dimensionnés contre leur conteneur, on peut s'en sortir avec un seul fichier d'entrée (pas de supplément additionnel nécessaire), et le style comme d'habitude.
<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;
}
Profitez les gars!
Ancienne Mise À Jour
a transformé ceci en un Stylus mixin. Devrait être assez facile pour l'un d'entre vous les chats de SCSS cool de le convertir.
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)
Utilisation:
<input type="file">
input[type="file"]
file-button(200px)
Comme JGuo et CorySimmons mentionné précédemment, vous pouvez utiliser le cliquables comportement d'un styliser étiquette, cachant de moins en moins flexibles de fichier de l'élément d'entrée.
<!DOCTYPE html>
<html>
<head>
<title>Custom file input</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<label for="upload-file" class="btn btn-info"> Choose file... </label>
<input id="upload-file" type="file" style="display: none"
onchange="this.nextElementSibling.textContent = this.previousElementSibling.title = this.files[0].name">
<div></div>
</body>
</html>
ces réponses sont jolies, et elles fonctionnent toutes pour des cas d'utilisation très spécifiques. C'est-à-dire, ils sont opiniâtres.
donc, voici une réponse qui ne suppose rien, mais qui fonctionnera peu importe comment vous la modifiez. Vous pouvez changer la conception avec css, ajouter javascript pour peut-être montrer un nom de fichier sur le changement, etc. il sera toujours toujours.
Code:
voici le noyau 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%;
}
et le html de base:
<div class="file-input">
<input type="file"/>
</div>
comme vous pouvez le voir, nous forçons tout événement pointeur(clic) qui se produit sur le .fichier d'entrée de l'élément, ou l'un de ses enfants, pour être acheminé vers le fichier d'entrée. C'est parce que l'entrée de fichier est positionnée absolue et consommera la largeur/hauteur du conteneur toujours. Vous pouvez donc personnaliser pour l'adapter à votre besoin. style le wrapper dans un bouton, utilisez quelques js pour afficher le nom de fichier sur select, etc. rien ne se cassera tant que le code de base ci-dessus reste intact.
comme vous le verrez dans la démo, j'ai ajouté un span
avec le texte" Select file "et une classe avec des styles supplémentaires pour style le .file-input
div. Cela devrait être le point de départ canonique pour toute personne ayant l'intention de créer un élément de téléchargement de fichier personnalisé.
Demo: JSFIDDLE