Hoe style je een invoerknop type="file"?
Antwoord 1, autoriteit 100%
Het stylen van bestandsinvoer is notoir moeilijk, omdat de meeste browsers het uiterlijk van CSS of javascript niet zullen veranderen.
Zelfs de grootte van de invoer zal niet reageren op:
<input type="file" style="width:200px">
In plaats daarvan moet u het maatkenmerk gebruiken:
<input type="file" size="60" />
Voor elke meer geavanceerde stijl (bijvoorbeeld het uiterlijk van de bladerknop wijzigen), moet je kijken naar de lastige benadering van het overlappen van een gestileerde knop en invoervak bovenop de oorspronkelijke bestandsinvoer. Het artikel dat al door rm is genoemd op www.quirksmode.org/dom/inputfile.htmlis de beste die ik heb gezien.
UPDATE
Hoewel het moeilijk is om een <input>-tag direct op te maken, is dit eenvoudig mogelijk met behulp van een <label>-tag. Zie het antwoord hieronder van @JoshCrozier: https://stackoverflow.com/a/25825731/10128619
Antwoord 2, autoriteit 92%
Hiervoor heeft u geen JavaScript nodig! Hier is een oplossing voor meerdere browsers:
Bekijk dit voorbeeld!– Het werkt in Chrome/FF/IE – (IE10/9/8/7)
De beste aanpak zou zijn om een aangepast labelelement te hebben met een for-attribuut gekoppeld aan een verborgenbestandsinvoerelement. (Het kenmerk forvan het label moet overeenkomen met de idvan het bestandselement om dit te laten werken).
<label for="file-upload" class="custom-file-upload">
Custom Upload
</label>
<input id="file-upload" type="file"/>
Als alternatief kunt u het bestandsinvoerelement ook rechtstreeks met een label omwikkelen: (voorbeeld)
<label class="custom-file-upload">
<input type="file"/>
Custom Upload
</label>
Wat betreft styling, verberg gewoon1het invoerelement met behulp van de kenmerkselector.
input[type="file"] {
display: none;
}
Het enige dat u hoeft te doen, is het aangepaste label-element opmaken. (voorbeeld).
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
1– Het is vermeldenswaard dat als u het element verbergt met display: none, het niet zal werken in IE8 en lager. Houd er ook rekening mee dat jQuery valideert verborgen velden niet valideertstandaard. Als een van deze dingen een probleem voor je is, zijn hier twee verschillende methoden om de invoer te verbergen (1, 2) die in deze omstandigheden werken.
Antwoord 3, autoriteit 72%
Volg deze stappen, dan kunt u aangepaste stijlen maken voor uw bestandsuploadformulier:
-
dit is het eenvoudige HTML-formulier (lees de HTML-opmerkingen die ik hieronder heb geschreven)
<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> -
gebruik dan dit eenvoudige script om de klikgebeurtenis door te geven aan de bestandsinvoertag.
function getFile(){ document.getElementById("upfile").click(); }Je kunt nu elk type styling gebruiken zonder dat je je zorgen hoeft te maken over het wijzigen van standaardstijlen.
Ik weet dit heel goed omdat ik al anderhalve maand probeer de standaardstijlen te veranderen. geloof me, het is erg moeilijk omdat verschillende browsers verschillende invoertags voor uploaden hebben. Gebruik deze dus om uw aangepaste formulieren voor het uploaden van bestanden te maken. Hier is de volledige GEAUTOMATISEERDE UPLOAD-code.
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>Antwoord 4, autoriteit 27%
Verberg het met css en gebruik een aangepaste knop met $(selector).click() om de bladerknop te activeren. stel vervolgens een interval in om de waarde van het bestandsinvoertype te controleren. het interval kan de waarde voor de gebruiker weergeven, zodat de gebruiker kan zien wat er wordt geüpload. het interval wordt gewist wanneer het formulier wordt verzonden [EDIT] Sorry, ik heb het erg druk gehad, was van plan dit bericht bij te werken, hier is een voorbeeld
<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;
});
});
Antwoord 5, autoriteit 24%
Alle rendering-engines genereren automatisch een knop wanneer een <input type="file">wordt gemaakt. Historisch gezien was die knop volledig on-stylebaar. Trident en WebKit hebben echter hooks toegevoegd via pseudo-elementen.
Drietand
Vanaf IE10 kan de bestandsinvoerknop worden gestyled met behulp van het ::-ms-browsepseudo-element. In principe kunnen alle CSS-regels die u op een gewone knop toepast, worden toegepast op het pseudo-element. Bijvoorbeeld:
::-ms-browse {
background: black;
color: red;
padding: 1em;
}<input type="file">Antwoord 6, autoriteit 24%
$('.new_Btn').click(function() {
$('#html_btn').click();
});.new_Btn {
// your css propterties
}
#html_btn {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file' " /><br>Antwoord 7, autoriteit 11%
Werkvoorbeeld hier met native ondersteuning voor slepen en neerzetten: https://jsfiddle.net/j40xvkb3/
Als je een bestandsinvoer opmaakt, moet je de native interactie niet verbreken
de invoer biedt .
De display: none-benadering breekt de native ondersteuning voor slepen en neerzetten.
Om niets te breken, moet u de benadering opacity: 0gebruiken voor de invoer en deze positioneren met een relatief/absoluut patroon in een wrapper.
Met deze techniek kunt u eenvoudig een klik-/neerzetzone voor de gebruiker opmaken en een aangepaste klasse in javascript toevoegen aan het evenement dragenterom stijlen bij te werken en de gebruiker feedback te geven zodat hij kan zien dat hij kan een bestand neerzetten.
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;
}
Hier is een werkend voorbeeld (met extra JS om dragover-gebeurtenis en gedropte bestanden af te handelen).
https://jsfiddle.net/j40xvkb3/
Hopelijk heeft dit geholpen!
Antwoord 8, autoriteit 10%
Als je Bootstrap 3 gebruikt, werkte dit voor mij:
Zie http://www.abeautifulsite. net/zweepslagen-bestand-invoer-in-vorm-met-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>Antwoord 9, autoriteit 8%
<label>
<input type="file" />
</label>
U kunt uw invoertype=”file” in een label voor de invoer plaatsen. Stijl het label zoals u wilt en verberg de invoer met weergave: geen;
Antwoord 10, autoriteit 8%
Ik kan het met pure CSSmet onderstaande code. Ik heb bootstrap en font-awesome gebruikt.
<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>Antwoord 11, autoriteit 8%
ALLEEN CSS
Gebruik deze zeer eenvoudigeen EENVOUDIGE
.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;
}<label>Attach your screenshort</label>
<input type="file" multiple class="choose">Antwoord 12, autoriteit 5%
Deze aanpak geeft u alle flexibiliteit! 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();
});
Hiermee verbergt u de knop voor het invoerbestand, maar onder de motorkap klikt u erop vanaf een andere normale knop, die u uiteraard kunt stylen zoals elke andere knop. Dit is de enige oplossing zonder nadeel, afgezien van een nutteloze DOM-node. Dankzij display:none;reserveert de invoerknop geen zichtbare ruimte in de DOM.
(Ik weet niet meer aan wie ik hiervoor rekwisieten moet geven. Maar dat idee heb ik ergens op Stackoverflow vandaan.)
Antwoord 13, autoriteit 5%
Hier is een oplossing die het element <input type="file" />niet echt opmaakt, maar in plaats daarvan een <input type="file" />element bovenop andere elementen (die gestileerd kunnen worden). Het element <input type="file" />is niet echt zichtbaar, dus de algehele illusie is van een mooi vormgegeven besturingselement voor het uploaden van bestanden.
Ik kwam dit probleem onlangs tegen en ondanks de overvloed aan antwoorden op Stack Overflow, leek geen enkele echt te passen. Uiteindelijk heb ik dit aangepast om een eenvoudige en elegante oplossing te hebben.
Ik heb dit ook getest op Firefox, IE (11, 10 & 9), Chrome en Opera, iPad en een paar Android-apparaten.
Hier is de JSFiddle-link -> 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>Antwoord 14, autoriteit 5%
Plaats de knop voor het uploaden van een bestand over je leuke knop of element en verberg het.
Heel eenvoudig en werkt in elke browser
<div class="upload-wrap">
<button type="button" class="nice-button">upload_file</button>
<input type="file" name="file" class="upload-btn">
</div>
Stijlen
.upload-wrap {
position: relative;
}
.upload-btn {
position: absolute;
left: 0;
opacity: 0;
}
Antwoord 15, autoriteit 4%
Dit is eenvoudig met jQuery. Om een codevoorbeeld te geven van de suggestie van Ryanmet een kleine wijziging.
Basis html:
<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">
Zorg ervoor dat u de stijl op de invoer instelt wanneer u klaar bent: opacity: 0
Je kunt display: noneniet instellen omdat het klikbaar moet zijn. Maar je kunt het onder de “nieuw”-knop plaatsen of onder iets anders instoppen met z-index als je dat liever hebt.
Stel wat jQuery in om op de echte invoer te klikken wanneer u op de afbeelding klikt.
$('#image_icon').click(function() {
$('#the_real_file_input').click();
});
Je knop werkt nu. Knip en plak de waarde wanneer deze is gewijzigd.
$('input[type=file]').bind('change', function() {
var str = "";
str = $(this).val();
$("#filename").text(str);
}).change();
Tah dah! Mogelijk moet u de val() ontleden naar iets zinvoller, maar u zou helemaal klaar moeten zijn.
Antwoord 16, autoriteit 3%
de enige manier die ik kan bedenken is om de knop met javascript te vinden nadat deze is weergegeven en er een stijl aan toe te wijzen
je zou ook kunnen kijken naar deze beschrijving
Antwoord 17, autoriteit 3%
<input type="file" name="media" style="display-none" onchange="document.media.submit()">
Normaal gesproken zou ik eenvoudig javascript gebruiken om de bestandsinvoertag aan te passen. Een verborgen invoerveld, met een klik op de knop, javascript roept het verborgen veld op, eenvoudige oplossing zonder enige css of een heleboel jquery.
<button id="file" onclick="$('#file').click()">Upload File</button>
Antwoord 18, autoriteit 3%
ZICHTBAARHEID:verborgen TRICK
Ik ga meestal voor de visibility:hidden-truc
dit is mijn gestileerde knop
<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>
dit is de input type=file-knop. Let op de regel visibility:hidden
<input type="file" id="upload" style="visibility:hidden;">
dit is het JavaScript-bit om ze aan elkaar te lijmen. Het werkt
<script>
$('#uploadbutton').click(function(){
$('input[type=file]').click();
});
</script>
Antwoord 19, autoriteit 3%
Meerdere bestandsoplossing met geconverteerde bestandsnaam
Bootstrap VOORBEELD
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 met 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 zonder 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;
});
});
Antwoord 20, autoriteit 2%
Hier gebruiken we een span om de invoer van een typebestand te activeren en we hebben die span gewoon aangepast, zodat we op deze manier elke stijl kunnen toevoegen.
Let opdat we een invoertag met de optie Visibiliteit:verborgen gebruiken en deze activeren in de span.
.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>Antwoord 21, autoriteit 2%
Hier is een oplossing, die ook de gekozen bestandsnaam laat zien:
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; }
Antwoord 22, autoriteit 2%
Dit is een leuke manier om het te doen met het uploaden van materiaal / hoekige bestanden.
Je zou hetzelfde kunnen doen met een bootstrap-knop.
Opmerking: ik heb <a>gebruikt in plaats van <button>hierdoor kunnen de klikgebeurtenissen opborrelen.
<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>
Antwoord 23
Misschien veel luifels. Maar ik hou van dit in pure CSS met fa-knoppen:
.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"/>Antwoord 24
Laat u niet misleiden door “geweldige” CSS-only-oplossingen die eigenlijk erg browserspecifiek zijn, of die de gestileerde knop bovenop de echte knop leggen, of die u dwingen een <label>in plaats van een <button>, of een andere dergelijke hack. JavaScript IS nodig om het voor algemeen gebruik te laten werken. Bestudeer alsjeblieft hoe Gmail en DropZone het doen als je me niet gelooft.
Voer gewoon een normale knop in zoals je wilt en roep vervolgens een eenvoudige JS-functie aan om een verborgen invoerelement te maken en aan je gestileerde knop te koppelen.
<!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>
Merk op hoe de bovenstaande code deze opnieuw koppelt na elke keer dat de gebruiker een bestand kiest. Dit is belangrijk omdat “onchange” alleen wordt aangeroepen als de gebruiker de bestandsnaam wijzigt. Maar u wilt waarschijnlijk het bestand elke keer dat de gebruiker het verstrekt, ophalen.
Antwoord 25
Hier is een PURE CSS, cross-browser oplossing! Het is Javascript-vrij! Deze probeert niet te verbergen en vervolgens de originele besturing opnieuw te maken, zoals de andere berichten hier doen. Het gebruikt plain CSSzonder enige circustrucs om het originele formulierbesturingselement voor het uploaden van bestanden te stylen voor alle belangrijke browsers.
Dit is hoe het besturingselement voor het uploaden van bestanden eruitziet in Firefox, Chrome en Edge met behulp van de onderstaande CSS. Dit is een heel eenvoudig schoon ontwerp. Je kunt het veranderen om het eruit te laten zien zoals je wilt:
Internet Explorer geeft je beperkte controle over het ontwerp, maar je kunt de controle tenminste manipuleren met CSS genoeg om een paar dingen te veranderen, waaronder afgeronde randen en kleuren:
<style>
/* Note: This CSS will style all instances of
<input type=file /> controls in your website. */
input[type="file"],
input[type="file"]:visited,
input[type="file"]:hover,
input[type="file"]:focus,
input[type="file"]:active {
margin:0;
padding: 0em 0em;
padding: 0rem 0rem;
overflow: hidden; /* long file names overflow so just hide the end */
background: #ffffff;
border-radius: .2em;
border-radius: .2rem;
outline: none;
border: 2px solid #bbb;
cursor: pointer;
-webkit-appearance: textfield;
-moz-appearance: textfield;
}
input[type="file"]:hover {
background: #f9f9ff; /* I am using a light blue to indicate an interaction */
border: 2px solid #999;
}
input[type="file"]:visited,
input[type="file"]:focus,
input[type="file"]:active {
background: #fff; /* Default back to white when focused. */
border: 2px solid #999;
}
/* Note: Firefox flags the file name box as a *readonly* input. So that attribute selector was added below. Note: These selectors blow up in IE so have to be separated from the same styles above. */
input[type="file"]:disabled,
input[type="file"]:read-only {
margin: 0;
padding: 0em 0em;
padding: 0rem 0rem;
overflow: hidden; /* long file names overflow so just hide the end */
background: #ffffff;
border-radius: .2em;
border-radius: .2rem;
outline: none;
border: 2px solid #bbb;
cursor: pointer;
-webkit-appearance: textfield;
-moz-appearance: textfield;
}
input[type="file"]:disabled:hover,
input[type="file"]:read-only:hover {
background: #f9f9ff; /* I am using a light blue to indicate an interaction */
border: 2px solid #999;
}
input[type="file"]:disabled:visited,
input[type="file"]:disabled:focus,
input[type="file"]:disabled:active,
input[type="file"]:read-only:visited,
input[type="file"]:read-only:focus,
input[type="file"]:read-only:active {
background: #fff; /* Default back to white when focused. */
border: 2px solid #999;
}
/* IE UPLOAD BUTTON STYLE: This attempts to alter the file upload button style in IE. Keep in mind IE gives you limited design control but at least you can customize its upload button.*/
::-ms-browse { /* IE */
display: inline-block;
margin: 0;
padding: .2em .5em;
padding: .2rem .5rem;
text-align: center;
outline: none;
border: none;
background: #fff;
white-space: nowrap;
cursor: pointer;
}
/* FIREFOX UPLOAD BUTTON STYLE */
::file-selector-button {/* firefox */
display: inline-block;
margin: 0rem 1rem 0rem 0rem;
padding: .18em .5em;
padding: .18rem .5rem;
-webkit-appearance: button;
text-align: center;
border-radius: .1rem 0rem 0rem .1rem;
outline: none;
border: none;
border-right: 2px solid #bbb;
background: #eee;
white-space: nowrap;
cursor: pointer;
}
/* CHROME AND EDGE UPLOAD BUTTON STYLE */
::-webkit-file-upload-button { /* chrome and edge */
display: inline-block;
margin: 0rem 1rem 0rem 0rem;
padding: .19em .5em;
padding: .19rem .5rem;
-webkit-appearance: button;
text-align: center;
border-radius: .1rem 0rem 0rem .1rem;
outline: none;
border: none;
border-right: 2px solid #bbb;
background: #eee;
white-space: nowrap;
cursor: pointer;
}
</style>
Opmerking: u kunt het testen in oudere versies van Firefox, Chrome, Edge en IE.
Antwoord 26
Ik heb een heel gemakkelijke methode gevonden om de bestandsknop naar een afbeelding te veranderen.
Je hoeft alleen maar een foto te labelen en deze boven op de bestandsknop te plaatsen.
<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>
Als u op de gelabelde afbeelding klikt, selecteert u de bestandsknop.
Antwoord 27
Deze week moest ik ook de knop aanpassen en de geselecteerde bestandsnaam ernaast weergeven, dus na het lezen van enkele van de bovenstaande antwoorden (bedankt btw) kwam ik op de volgende implementatie:
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 (hoekig)
app.controller('MainCtrl', function($scope) {
$scope.fileName = 'No file chosen';
$scope.onFileSelect = function ($files) {
$scope.selectedFile = $files;
$scope.fileName = $files[0].name;
};
});
In principe werk ik met ng-file-upload lib, Angular-wise bind ik de bestandsnaam aan mijn $scope en geef het de initiële waarde van ‘Geen bestand gekozen’, ik bind ook de onFileSelect( ) functie toe aan mijn scope, dus wanneer een bestand wordt geselecteerd, krijg ik de bestandsnaam met behulp van de ng-upload API en wijs deze toe aan de $scope.filename.
Antwoord 28
Simuleer eenvoudig een klik op de <input>door de functie trigger()te gebruiken bij het klikken op een gestileerde <div>. Ik heb mijn eigen knop gemaakt van een <div>en heb vervolgens een klik op de inputgeactiveerd toen ik op mijn <div>klikte. Hiermee kunt u uw knop maken zoals u dat wilt, omdat het een <div>is en een klik op uw bestand <input>simuleert. Gebruik dan display: noneop je <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");
});
Antwoord 29
De beste manier is om het pseudo-element :after of :before te gebruiken als een element dat de invoer overt. Style dan dat pseudo-element naar wens. Ik raad je aan om als algemene stijl voor alle invoerbestanden als volgt te doen:
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;
}
Antwoord 30
De beste manier die ik heb gevonden is om een input type: filete gebruiken en dit vervolgens in te stellen op display: none. Geef het een id. Maak een knop of een ander element waarmee u de bestandsinvoer wilt openen.
Voeg er vervolgens een gebeurtenislistener aan toe (knop) die, wanneer erop wordt geklikt, een klik op de oorspronkelijke bestandsinvoer simuleert.
Zoals klikken op een knop met de naam hallo, maar het opent een bestandsvenster.
Voorbeeldcode
//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")
})