Related
I would like to make a check box which if checked the button enables. If the checkbox is unchecked the button should be disabled.
Could someone help me with this? I think I'm very close just missing a way to connect these lines.
Thanks in advance!
<button disabled="Calendly.initPopupWidget({url: 'https://calendly.com/xxxxxxxxxxx'});return false;">Plan</button>
<td width="10px" style="min-width: 10px"></td>
<td width="70%">
<input type="checkbox" name="TOS" value="Accept" onClick="button enabled"> I agree to Terms of Service agreement.
</td>
You can work on something like this.
const checkbox = document.getElementById('myCheckbox')
const planbtn = document.getElementById('planBtn')
checkbox.addEventListener('change', (event) => {
if (event.currentTarget.checked) {
planbtn.disabled = false;
} else {
planbtn.disabled = true;
}
})
<button id="planBtn" disabled="Calendly.initPopupWidget({url: 'https://calendly.com/xxxxxxxxxxx'});return false;">Plan</button>
<td width="10px" style="min-width: 10px"></td>
<td width="70%">
<input type="checkbox" name="TOS" value="Accept" id="myCheckbox"> I agree to Terms of Service agreement.
</td>
So, what you want to do is the following:
document.getElementById('TOS').onclick = function() {
if (this.checked) {
document.getElementById('plan').disabled = false;
} else {
document.getElementById('plan').disabled = true;
}
}
<button disabled="Calendly.initPopupWidget({url: 'https://calendly.com/xxxxxxxxxxx'});return false;" id="plan">Plan</button>
<!-- id="plan" has been added for reference in JS -->
<td width="10px" style="min-width: 10px"></td>
<td width="70%">
<input id="TOS" type="checkbox" name="TOS" value="Accept" onClick="button enabled"> I agree to Terms of Service agreement.
<!-- id="TOS" has been added for reference in JS -->
</td>
All this does, is when the checkbox input has been clicked, the code checks to see if it is checked. If so, it sets disabled to false for the button. Otherwise, the disabled property of the button is true.
Yet another variation that's essentially the same as the others:
const btn = document.querySelector("button");
const chk = document.querySelector("input[type='checkbox']");
chk.addEventListener("click", () => { handleClick(btn); });
function handleClick(btn) {
btn.disabled = !btn.disabled;
}
It finds the button element, finds your checkbox, and then listens for a click. It toggles the button's disabled attribute with that click.
HTML & CSS Solution
Do the following:
HTML
Markup
Move checkbox before the button.
Remove the <td> if it isn't in a <tr> inside a <table> then it's invalid HTML. If you are using a table as layout and not for data then it's not sementic.
Add a <label> after the button.
Attributes
The values do not have to be exactly what is in the examples. They are specific to avoid any confusion and some will be reused specifically in another property.
Add the following to checkbox:
id="TOS"
Add the following to button:
class="cal" See CSS
type="button" Just in case the button is inside a <form>
Remove the disabled attribute from button. Note the only value assigned to disabled is a Boolean: true or false.
Remove the JavaScript from button. Keep presentation (CSS), structure (HTML), and content (JavaScript) separate from each other as much as possible. The correct way isn't disabled="...." it's onclick="...". That onclick="..." is called an inline event attribute or inline event handler, but avoid using them as well because inline event handlers are garbage. The proper way is to either write the JavaScript on a external file or in a <script> block, the latter is demonstrated in the example below.
Add the following to the <label>:
for="TOS" This will associate <label> with the checkbox. Now as long as they are both on the same page (no matter how far apart they are), clicking one will also click the other.
class="chx" See CSS.
CSS
There is some extensive CSS in the example so only the important aspects will be discussed. What isn't mentioned is for aesthetics.
Checkbox
The styles assigned to #TOS is just to hide it visually but not from screenreaders, if you're not concerned about sight impaired users then display: none is sufficient:
#TOS {
position: absolute;
clip: rect(0 0 0 0); clip-path: inset(50%);
width: 1px; height: 1px;
overflow: hidden; white-space: nowrap;
}
Note: The whole purpose of relocating and hiding the checkbox is because CSS operates in a casscading pattern, which requires that selectors that have an alternate state (ex. checked/unchecked) can dictate the styles of oyher selectors that are either within or after (under) of that that selector in the HTML layout. The next styles demonstrate this relationship between checkbox (input#TOS) and button (button.cal) and checkbox (input#TOS) and label (label.chx).
Button
In default state, .cal is disabled (do not confuse it's state with disabled attribute, it will not be used because JavaScript is needed to change it.):
.cal {
pointer-events: none; /* Can't click on it */
color: white; background: lightgrey;
outline: none; /* Can't focus on it */
}
When the checkbox is checked, .cal is enabled, the + is an adjacent sibling combinator which specifies that whatever follows afterwards is the selector assigned the styles:
#TOS:checked+.cal {
pointer-events: auto; /* Can click it */
color: black; background: white;
outline: initial; /* Can focus on it */
cursor: pointer;
}
Label
Also, when the checkbox is checked the label changes as well. The label is now the only way the hidden checkbox can be checked/unchecked because the label has for="TOS" which links them together. The label has two pseudo-elements ::before and ::after. ::after has the text next to the fake checkbox. ::before consists of two Unicode characters which serves as a substitute for the hidden checkbox. The ~ is a general sibling combinator which works like the adjacent sibling combinator but instead of stopping at the selector right afterwards, it continues to find all selectors thereafter:
.chx::before {
content: '\002b1b'; /* ⬛ a large black square as default */
...
}
/* When checkbox is checked label.chx changes it's fake checkbox */
#TOS:checked~.chx::before {
content: '\002611\00fe0f'; /* ☑️ a checkbox check */
}
Example
/* This is a proper onevent property -
if button.cal is clicked the anonymous function will be invoked.
*/
document.querySelector('.cal').onclick = function(e) {
Calendly.initPopupWidget({
url: 'https://calendly.com/xxxxx'
});
};
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
font: 1ch/1.25 'Segoe UI';
}
html,
body {
width: 100%;
min-height: 100%;
}
body {
display: flex;
justify-content: space-around;
align-items: flex-start;
font-size: 2rem;
}
#TOS {
position: absolute;
clip: rect(0 0 0 0);
clip-path: inset(50%);
width: 1px;
height: 1px;
overflow: hidden;
white-space: nowrap;
}
button {
display: block;
width: max-content;
margin: 0 4px;
padding: 2px 4px;
border-radius: 4px;
font-size: 100%;
}
label {
display: inline-table;
margin: 0 4px;
}
.chx::before {
content: '\002b1b';
display: table-cell;
font-size: 2rem;
padding: 0 4px;
}
.chx::after {
content: ' I agree to Terms of Service agreement.';
display: table-cell;
padding: 0 4px;
}
.cal {
pointer-events: none;
color: white;
background: lightgrey;
outline: none;
}
#TOS:checked~.chx::before {
content: '\002611\00fe0f';
}
#TOS:checked+.cal {
pointer-events: auto;
color: black;
background: white;
outline: initial;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calendy Widget</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href='https://fake.com/path/to/style.css' rel='stylesheet'>
<style>
/* This is where CSS goes */
</style>
</head>
<body>
<input id='TOS' name="TOS" type="checkbox" value="Accept">
<button class='cal' type='button'>Plan</button>
<label for="TOS" class='chx'></label>
<script src='https://fake.com/path/to/script.js'></script>
<script>
/* This is where JavaScript goes */
</script>
</body>
</html>
How do you style an input type="file" button?
<input type="file" />
You don't need JavaScript for this! Here is a cross-browser solution:
See this example! - It works in Chrome/FF/IE - (IE10/9/8/7)
The best approach would be to have a custom label element with a for attribute attached to a hidden file input element. (The label's for attribute must match the file element's id in order for this to work).
<label for="file-upload" class="custom-file-upload">
Custom Upload
</label>
<input id="file-upload" type="file"/>
As an alternative, you could also just wrap the file input element with a label directly: (example)
<label class="custom-file-upload">
<input type="file"/>
Custom Upload
</label>
In terms of styling, just hide1 the input element using the attribute selector.
input[type="file"] {
display: none;
}
Then all you need to do is style the custom label element. (example).
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
1 - It's worth noting that if you hide the element using display: none, it won't work in IE8 and below. Also be aware of the fact that jQuery validate doesn't validate hidden fields by default. If either of those things are an issue for you, here are two different methods to hide the input (1, 2) that work in these circumstances.
Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.
Even the size of the input will not respond to the likes of:
<input type="file" style="width:200px">
Instead, you will need to use the size attribute:
<input type="file" size="60" />
For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.
UPDATE
Although it's difficult to style an <input> tag directly, this is easily possible with the help of a <label> tag. See answer below from #JoshCrozier: https://stackoverflow.com/a/25825731/10128619
follow these steps then you can create custom styles for your file upload form:
this is the simple HTML form(please read the HTML comments I have written here below)
<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>
then use this simple script to pass the click event to file input tag.
function getFile(){
document.getElementById("upfile").click();
}
Now you can use any type of styling without worrying about how to change default styles.
I know this very well because I have been trying to change the default styles for a month and a half. believe me, it's very hard because different browsers have different upload input tag. So use this one to build your custom file upload forms. Here is the full AUTOMATED 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>
All rendering engines automatically generate a button when an <input type="file"> is created. Historically, that button has been completely un-styleable. However, Trident and WebKit have added hooks through pseudo-elements.
Trident
As of IE10, the file input button can be styled using the ::-ms-browse pseudo-element. Basically, any CSS rules that you apply to a regular button can be applied to the pseudo-element. For example:
::-ms-browse {
background: black;
color: red;
padding: 1em;
}
<input type="file">
This displays as follows in IE10 on Windows 8:
WebKit
WebKit provides a hook for its file input button with the ::-webkit-file-upload-button pseudo-element. Again, pretty much any CSS rule can be applied, therefore the Trident example will work here as well:
::-webkit-file-upload-button {
background: black;
color: red;
padding: 1em;
}
<input type="file">
This displays as follows in Chrome 26 on OS X:
Hide it with css and use a custom button with $(selector).click() to activate the the browse button. then set an interval to check the value of the file input type. the interval can display the value for the user so the user can see whats getting uploaded. the interval will clear when the form is submitted [EDIT] Sorry i have been very busy was meaning to update this post, here is an example
<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;
});
});
::file-selector-button
https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button
This is a new selector that can be used to style the file selector button.
It has full support on recent browser versions.
input[type=file]::file-selector-button {
border: 2px solid #6c5ce7;
padding: .2em .4em;
border-radius: .2em;
background-color: #a29bfe;
transition: 1s;
}
input[type=file]::file-selector-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
<form>
<label for="fileUpload">Upload file</label>
<input type="file" id="fileUpload">
</form>
Here is another snippet that demonstrates different styling:
.input_container {
border: 1px solid #e5e5e5;
}
input[type=file]::file-selector-button {
background-color: #fff;
color: #000;
border: 0px;
border-right: 1px solid #e5e5e5;
padding: 10px 15px;
margin-right: 20px;
transition: .5s;
}
input[type=file]::file-selector-button:hover {
background-color: #eee;
border: 0px;
border-right: 1px solid #e5e5e5;
}
<form>
<div class="input_container">
<input type="file" id="fileUpload">
</div>
</form>
I felt that this answer was needed as most answers here are outdated.
$('.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>
You can reach your goals too without jQuery with normal JavaScript.
Now the newBtn is linkes with the html_btn and you can style your new btn like you want :D
If you are using Bootstrap 3, this worked for me:
See https://www.abeautifulsite.net/posts/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>
Which produces the following file input button:
Seriously, check out https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/
Working example here with native Drag and drop support : https://jsfiddle.net/j40xvkb3/
When styling a file input, you shouldn't break any of native interaction
the input provides.
The display: none approach breaks the native drag and drop support.
To not break anything, you should use the opacity: 0 approach for the input, and position it using relative / absolute pattern in a wrapper.
Using this technique, you can easily style a click / drop zone for the user, and add custom class in javascript on dragenter event to update styles and give user a feedback to let him see that he can drop a file.
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;
}
Here is a working example (with additional JS to handle dragover event and dropped files).
https://jsfiddle.net/j40xvkb3/
Hope this helped !
I am able to do it with pure CSS using below code. I have used bootstrap and 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>
ONLY CSS
Use this very simple and EASY
.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">
<label>
<input type="file" />
</label>
You can wrap your input type="file" inside of a label for the input. Style the label however you'd like and hide the input with display: none;
This approach gives you the whole flexibility! 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();
});
This hides the input-file button, but under the hood clicks it from another normal button, that you can obviously style like any other button. This is the only solution with no downside apart from a useless DOM-node. Thanks to display:none;, the input-button does not reserve any visible space in the DOM.
(I don't know anymore to whom to give props for this. But I got that idea from somewhere here on Stackoverflow.)
Put upload file button over your nice button or element and hide it.
Very simple and will work on any browser
<div class="upload-wrap">
<button type="button" class="nice-button">upload_file</button>
<input type="file" name="file" class="upload-btn">
</div>
Styles
.upload-wrap {
position: relative;
}
.upload-btn {
position: absolute;
left: 0;
opacity: 0;
}
Here is a solution which doesn't really style the <input type="file" /> element but instead uses a <input type="file" /> element on top of other elements (which can be styled). The <input type="file" /> element is not really visible hence, the overall illusion is of a nicely styled file upload control.
I came across this problem recently and despite the plethora of answers on Stack Overflow, none really seemed to fit the bill. In the end, I ended up customizing this so as to have a simple and an elegant solution.
I have also tested this on Firefox, IE (11, 10 & 9), Chrome and Opera, iPad and a few android devices.
Here's the 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>
Hope this helps!!!
This is simple with jquery. To give a code example of Ryan's suggestion with a slight modification.
Basic html:
<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">
Be sure to set the styling on the input when you're ready: opacity: 0
You can't set display: none because it needs to be clickable. But you can position it under the "new" button or tuck in under something else with z-index if you prefer.
Setup some jquery to click the real input when you click the image.
$('#image_icon').click(function() {
$('#the_real_file_input').click();
});
Now your button is working. Just cut and paste the value when changed.
$('input[type=file]').bind('change', function() {
var str = "";
str = $(this).val();
$("#filename").text(str);
}).change();
Tah dah! You may need to parse the val() to something more meaningful but you should be all set.
Here is a PURE CSS, Javascript-free, Bootstrap-free, 100% cross-browser solution! Just cut-and-paste one block of styles, then test your file upload control.
This solution does NOT attempt to hide then recreate the original HTML element like the other posts here do. It uses plain CSS without any circus tricks or third party tools to style the original file upload form control for all the major browsers. You do not need to even change your HTML code! Just cut-and-paste the code below into your web page to test it...
<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;/* fallback: older browsers like IE 1-8 need "em" */
padding: 0rem 0rem;/* older browsers dont know what "rem" is */
overflow: hidden; /* long file names overflow so just hide the end */
background: #fff;
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; /* Optional rollover color: 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: These "disabled" selectors blow up in IE so have to be separated from the same styles above. */
input[type="file"]:disabled {
margin: 0;
padding: 0em 0em;
padding: 0rem 0rem;
overflow: hidden; /* long file names overflow so just hide the end */
background: #ddd;
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 {
background: #ddd; /* disabled-readonly buttons should be grey */
border: 2px solid #999;
}
input[type="file"]:disabled:visited,
input[type="file"]:disabled:focus,
input[type="file"]:disabled:active {
background: #ddd; /* disabled-readonly buttons should be grey */
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>
<input type="file" id="fileupload" name="fileupload"
value="" tabindex="0" enctype="multipart/form-data"
accept="image/*" autocomplete="off" multiple="multiple"
aria-multiselectable="true" title="Multiple File Upload"
aria-label="Multiple File Upload" />
<br /><br />
<input disabled="disabled" type="file" id="fileupload"
name="fileupload" value="" tabindex="0"
enctype="multipart/form-data" accept="image/*"
autocomplete="off" multiple="multiple"
aria-multiselectable="true" title="Disabled Multiple File Upload"
aria-label="Disabled Multiple File Upload" />
This is what the file upload control looks like in Firefox, Chrome, and Edge using the CSS below. This is a very simple clean design. You can change it to look any way you like:
Internet Explorer gives you limited design control, but at least you can manipulate the control using CSS enough to change a few things, including rounded borders and colors:
The advantages to my solution are:
You stick with simple CSS to style the original HTML input control
You can see one or more file names in the file input textbox
Screen readers and ARIA-friendly devices can interact normally with your file upload control
You can set tabindex on your HTML element so its part of the tab order
Because you are using plain HTML and CSS, your file input button works perfectly in old and new browsers
ZERO JavaScript required!
Runs and loads lighting fast in even the oldest of browsers
Because your are not using "display:none" to hide the control, its file block stream data is never disabled from reaching the server in any old or new browser version known
You do not need goofy JavaScript tricks, Bootstrap, or to try and hide/recreate your file input control. That just destroys usability for everyone online. Styling the original HTML control means your file upload control is guaranteed to work well in 25 years worth of web browsers, old and new.
This is why you cannot trust all these scripted hacks here that erase, rewrite, or destroy HTML just to try and recreate some visual experience. That shows that you do not understand how HTML is used or why its been around for 30 years practically unchanged. You should never try and rewrite HTML's native form control functionality. Why? There is more to using natural HTML in websites than just manipulation of markup for some forced visual experience. The trade-offs of limited visual design in these replaced HTML elements was designed that way for a reason.
My advice: Stay with simple HTML and CSS solutions and you will have ZERO problems as a web developer.
<input type="file" name="media" style="display-none" onchange="document.media.submit()">
I would normally use simple javascript to customize the file input tag.A hidden input field,on click of button,javascript call the hidden field,simple solution with out any css or bunch of jquery.
<button id="file" onclick="$('#file').click()">Upload File</button>
VISIBILITY:hidden TRICK
I usually go for the visibility:hidden trick
this is my styled button
<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>
this is the input type=file button. Note the visibility:hidden rule
<input type="file" id="upload" style="visibility:hidden;">
this is the JavaScript bit to glue them together. It works
<script>
$('#uploadbutton').click(function(){
$('input[type=file]').click();
});
</script>
Multiple file solution with converted filename
Bootstrap EXAMPLE
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 with 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 without 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;
});
});
the only way i can think of is to find the button with javascript after it gets rendered and assign a style to it
you might also look at this writeup
Here we use a span to trigger input of type file and we simply customized that span, so we can add any styling using this way.
Note that we use input tag with visibility:hidden option and trigger it in the 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>
Reference
Here is a solution, that also shows the chosen file name:
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; }
This is a nice way to do it with material / angular file upload.
You could do the same with a bootstrap button.
Note I used <a> instead of <button> this allows the click events to bubble up.
<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>
Maybe a lot of awnsers. But I like this in pure CSS with 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"/>
Fiddle: https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/
Don't be fooled by "great" CSS-only solutions that are actually very browser-specific, or that overlay the styled button on top of the real button, or that force you to use a <label> instead of a <button>, or any other such hack. JavaScript IS necessary to get it working for general usage. Please study how gmail and DropZone do it if you don't believe me.
Just style a normal button however you want, then call a simple JS function to create and link a hidden input element to your styled button.
<!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>
Notice how the above code re-links it after every time the user chooses a file. This is important because "onchange" is only called if the user changes the filename. But you probably want to get the file every time the user provides it.
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">
<style>
.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;
}
</style>
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)
I've found a very easy method to switch the file button to a picture.
You just label a picture and place it on top of the file button.
<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>
When clicking on the labeled image, you select the file button.
This week I also needed to custom the button and display the selected file name aside it, so after reading some of the answers above (Thanks BTW) I came up with the following implementation:
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;
};
});
Basically I'm working with ng-file-upload lib, Angular-wise I'm binding the filename to my $scope and giving it the initial value of 'No file chosen', I'm also binding the onFileSelect() function to my scope so when a file gets selected I'm getting the filename using ng-upload API and assign it to the $scope.filename.
Simply simulate a click on the <input> by using the trigger() function when clicking on a styled <div>. I created my own button out of a <div> and then triggered a click on the input when clicking my <div>. This allows you to create your button however you want because it's a <div> and simulates a click on your file <input>. Then use display: none on your <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");
});
I am fairly new and just experiencing with some html/css . I was planning to make a login screen pop up in the middle of when a user clicks "login".
i've set up a div which is hidden on the screen and i want to make it visible when the user clicks on "login"
the problem i'm having is making the Div visible again . Here is the CSS:
#loginscreen {
position: absolute;
width: 400px;
height: 500px;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 2px solid black;
border-radius: 40px;
background-color: lightgrey;
visibility: hidden;
z-index: 1000;
}
.loginbtn:active + #loginscreen
{
visibility: visible
}
:active only works for as long as the element is being clicked. As soon as the click is no longer being held the element will no longer be active.
Try using Javascript to do this, for example:
<button type="button" onclick="document.getElementById('<id-of-div>').style.visibility = 'visible'"> Login </button>
Where <id-of-div> is whatever id you have assigned to the div you wish to make visible.
You cannot trap a user event ("click") without using javascript (or, better yet, jQuery). As a beginner, I first suggest you use jQuery rather than pure javascript. For one thing, it's much less typing and (imho) far easier to master. You code in jQuery, and behind the scenes jQuery turns that into javascript at runtime. To use jQuery, all you must do is include the jQuery library in the <head> tags of each page, like this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
The jQuery to show the login form would look something like this:
$('#mybutt').click(function(){
$('#loginscreen').fadeIn(800);
});
Here is an example you can use for ideas:
jsFiddle Demo
$('#mybutt').click(function(){
$('#loginscreen').fadeIn(800);
});
$('#logX').click(function(){
$('#loginscreen').fadeOut(800);
});
div{position:relative;box-sizing:border-box;}
#loginscreen {
position: absolute;
width: 400px;
height: auto;
top:0;
right: 0;
border: 1px solid #ddd;
border-radius: 4px;
background-color: lightgrey;
z-index: 1000;
display:none;
}
#logHead{width:100%;height:40px;padding:5px;background:darkcyan;color:white;overflow:hidden;}
#headLeft{float:left;width:80%;}
#headRight{float:right;width:20px;padding:5px;border:1px solid green;cursor:pointer;}
#logTop{width:100%;padding:20px;}
#logUN{width:100%;}
#logPW{width:100%;}
#logBott{width:100%;padding-left:80%;overflow:hidden;}
#loginscreen input{font-size:1.5rem;border:1px solid #ddd;}
button{font-size:1.5rem;color:white;background:darkcyan;cursor:pointer;}
#mybutt{position:absolute;bottom:150px;left:50px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="loginscreen">
<div id="logHead">
<div id="headLeft">Login:</div>
<div id="headRight"><div id="logX">X</div></div>
</div>
<div id="logTop">
<div id="logUN"><input type="text" id="username" placeholder="user"/></div>
<div id="logPW"><input type="text" id="password" placeholder="pass"/></div>
</div>
<div id="logBott">
<button>Login</button>
</div>
</div>
<input type="button" id="mybutt" value="Login" />
Since you are new to jQuery, here are some free beginner-level tutorials to get you started. (It's where I learned myself, and they're free)
How do you style an input type="file" button?
<input type="file" />
You don't need JavaScript for this! Here is a cross-browser solution:
See this example! - It works in Chrome/FF/IE - (IE10/9/8/7)
The best approach would be to have a custom label element with a for attribute attached to a hidden file input element. (The label's for attribute must match the file element's id in order for this to work).
<label for="file-upload" class="custom-file-upload">
Custom Upload
</label>
<input id="file-upload" type="file"/>
As an alternative, you could also just wrap the file input element with a label directly: (example)
<label class="custom-file-upload">
<input type="file"/>
Custom Upload
</label>
In terms of styling, just hide1 the input element using the attribute selector.
input[type="file"] {
display: none;
}
Then all you need to do is style the custom label element. (example).
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
1 - It's worth noting that if you hide the element using display: none, it won't work in IE8 and below. Also be aware of the fact that jQuery validate doesn't validate hidden fields by default. If either of those things are an issue for you, here are two different methods to hide the input (1, 2) that work in these circumstances.
Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.
Even the size of the input will not respond to the likes of:
<input type="file" style="width:200px">
Instead, you will need to use the size attribute:
<input type="file" size="60" />
For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.
UPDATE
Although it's difficult to style an <input> tag directly, this is easily possible with the help of a <label> tag. See answer below from #JoshCrozier: https://stackoverflow.com/a/25825731/10128619
follow these steps then you can create custom styles for your file upload form:
this is the simple HTML form(please read the HTML comments I have written here below)
<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>
then use this simple script to pass the click event to file input tag.
function getFile(){
document.getElementById("upfile").click();
}
Now you can use any type of styling without worrying about how to change default styles.
I know this very well because I have been trying to change the default styles for a month and a half. believe me, it's very hard because different browsers have different upload input tag. So use this one to build your custom file upload forms. Here is the full AUTOMATED 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>
All rendering engines automatically generate a button when an <input type="file"> is created. Historically, that button has been completely un-styleable. However, Trident and WebKit have added hooks through pseudo-elements.
Trident
As of IE10, the file input button can be styled using the ::-ms-browse pseudo-element. Basically, any CSS rules that you apply to a regular button can be applied to the pseudo-element. For example:
::-ms-browse {
background: black;
color: red;
padding: 1em;
}
<input type="file">
This displays as follows in IE10 on Windows 8:
WebKit
WebKit provides a hook for its file input button with the ::-webkit-file-upload-button pseudo-element. Again, pretty much any CSS rule can be applied, therefore the Trident example will work here as well:
::-webkit-file-upload-button {
background: black;
color: red;
padding: 1em;
}
<input type="file">
This displays as follows in Chrome 26 on OS X:
Hide it with css and use a custom button with $(selector).click() to activate the the browse button. then set an interval to check the value of the file input type. the interval can display the value for the user so the user can see whats getting uploaded. the interval will clear when the form is submitted [EDIT] Sorry i have been very busy was meaning to update this post, here is an example
<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;
});
});
::file-selector-button
https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button
This is a new selector that can be used to style the file selector button.
It has full support on recent browser versions.
input[type=file]::file-selector-button {
border: 2px solid #6c5ce7;
padding: .2em .4em;
border-radius: .2em;
background-color: #a29bfe;
transition: 1s;
}
input[type=file]::file-selector-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
<form>
<label for="fileUpload">Upload file</label>
<input type="file" id="fileUpload">
</form>
Here is another snippet that demonstrates different styling:
.input_container {
border: 1px solid #e5e5e5;
}
input[type=file]::file-selector-button {
background-color: #fff;
color: #000;
border: 0px;
border-right: 1px solid #e5e5e5;
padding: 10px 15px;
margin-right: 20px;
transition: .5s;
}
input[type=file]::file-selector-button:hover {
background-color: #eee;
border: 0px;
border-right: 1px solid #e5e5e5;
}
<form>
<div class="input_container">
<input type="file" id="fileUpload">
</div>
</form>
I felt that this answer was needed as most answers here are outdated.
$('.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>
You can reach your goals too without jQuery with normal JavaScript.
Now the newBtn is linkes with the html_btn and you can style your new btn like you want :D
If you are using Bootstrap 3, this worked for me:
See https://www.abeautifulsite.net/posts/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>
Which produces the following file input button:
Seriously, check out https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/
Working example here with native Drag and drop support : https://jsfiddle.net/j40xvkb3/
When styling a file input, you shouldn't break any of native interaction
the input provides.
The display: none approach breaks the native drag and drop support.
To not break anything, you should use the opacity: 0 approach for the input, and position it using relative / absolute pattern in a wrapper.
Using this technique, you can easily style a click / drop zone for the user, and add custom class in javascript on dragenter event to update styles and give user a feedback to let him see that he can drop a file.
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;
}
Here is a working example (with additional JS to handle dragover event and dropped files).
https://jsfiddle.net/j40xvkb3/
Hope this helped !
I am able to do it with pure CSS using below code. I have used bootstrap and 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>
ONLY CSS
Use this very simple and EASY
.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">
<label>
<input type="file" />
</label>
You can wrap your input type="file" inside of a label for the input. Style the label however you'd like and hide the input with display: none;
This approach gives you the whole flexibility! 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();
});
This hides the input-file button, but under the hood clicks it from another normal button, that you can obviously style like any other button. This is the only solution with no downside apart from a useless DOM-node. Thanks to display:none;, the input-button does not reserve any visible space in the DOM.
(I don't know anymore to whom to give props for this. But I got that idea from somewhere here on Stackoverflow.)
Put upload file button over your nice button or element and hide it.
Very simple and will work on any browser
<div class="upload-wrap">
<button type="button" class="nice-button">upload_file</button>
<input type="file" name="file" class="upload-btn">
</div>
Styles
.upload-wrap {
position: relative;
}
.upload-btn {
position: absolute;
left: 0;
opacity: 0;
}
Here is a solution which doesn't really style the <input type="file" /> element but instead uses a <input type="file" /> element on top of other elements (which can be styled). The <input type="file" /> element is not really visible hence, the overall illusion is of a nicely styled file upload control.
I came across this problem recently and despite the plethora of answers on Stack Overflow, none really seemed to fit the bill. In the end, I ended up customizing this so as to have a simple and an elegant solution.
I have also tested this on Firefox, IE (11, 10 & 9), Chrome and Opera, iPad and a few android devices.
Here's the 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>
Hope this helps!!!
This is simple with jquery. To give a code example of Ryan's suggestion with a slight modification.
Basic html:
<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">
Be sure to set the styling on the input when you're ready: opacity: 0
You can't set display: none because it needs to be clickable. But you can position it under the "new" button or tuck in under something else with z-index if you prefer.
Setup some jquery to click the real input when you click the image.
$('#image_icon').click(function() {
$('#the_real_file_input').click();
});
Now your button is working. Just cut and paste the value when changed.
$('input[type=file]').bind('change', function() {
var str = "";
str = $(this).val();
$("#filename").text(str);
}).change();
Tah dah! You may need to parse the val() to something more meaningful but you should be all set.
Here is a PURE CSS, Javascript-free, Bootstrap-free, 100% cross-browser solution! Just cut-and-paste one block of styles, then test your file upload control.
This solution does NOT attempt to hide then recreate the original HTML element like the other posts here do. It uses plain CSS without any circus tricks or third party tools to style the original file upload form control for all the major browsers. You do not need to even change your HTML code! Just cut-and-paste the code below into your web page to test it...
<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;/* fallback: older browsers like IE 1-8 need "em" */
padding: 0rem 0rem;/* older browsers dont know what "rem" is */
overflow: hidden; /* long file names overflow so just hide the end */
background: #fff;
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; /* Optional rollover color: 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: These "disabled" selectors blow up in IE so have to be separated from the same styles above. */
input[type="file"]:disabled {
margin: 0;
padding: 0em 0em;
padding: 0rem 0rem;
overflow: hidden; /* long file names overflow so just hide the end */
background: #ddd;
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 {
background: #ddd; /* disabled-readonly buttons should be grey */
border: 2px solid #999;
}
input[type="file"]:disabled:visited,
input[type="file"]:disabled:focus,
input[type="file"]:disabled:active {
background: #ddd; /* disabled-readonly buttons should be grey */
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>
<input type="file" id="fileupload" name="fileupload"
value="" tabindex="0" enctype="multipart/form-data"
accept="image/*" autocomplete="off" multiple="multiple"
aria-multiselectable="true" title="Multiple File Upload"
aria-label="Multiple File Upload" />
<br /><br />
<input disabled="disabled" type="file" id="fileupload"
name="fileupload" value="" tabindex="0"
enctype="multipart/form-data" accept="image/*"
autocomplete="off" multiple="multiple"
aria-multiselectable="true" title="Disabled Multiple File Upload"
aria-label="Disabled Multiple File Upload" />
This is what the file upload control looks like in Firefox, Chrome, and Edge using the CSS below. This is a very simple clean design. You can change it to look any way you like:
Internet Explorer gives you limited design control, but at least you can manipulate the control using CSS enough to change a few things, including rounded borders and colors:
The advantages to my solution are:
You stick with simple CSS to style the original HTML input control
You can see one or more file names in the file input textbox
Screen readers and ARIA-friendly devices can interact normally with your file upload control
You can set tabindex on your HTML element so its part of the tab order
Because you are using plain HTML and CSS, your file input button works perfectly in old and new browsers
ZERO JavaScript required!
Runs and loads lighting fast in even the oldest of browsers
Because your are not using "display:none" to hide the control, its file block stream data is never disabled from reaching the server in any old or new browser version known
You do not need goofy JavaScript tricks, Bootstrap, or to try and hide/recreate your file input control. That just destroys usability for everyone online. Styling the original HTML control means your file upload control is guaranteed to work well in 25 years worth of web browsers, old and new.
This is why you cannot trust all these scripted hacks here that erase, rewrite, or destroy HTML just to try and recreate some visual experience. That shows that you do not understand how HTML is used or why its been around for 30 years practically unchanged. You should never try and rewrite HTML's native form control functionality. Why? There is more to using natural HTML in websites than just manipulation of markup for some forced visual experience. The trade-offs of limited visual design in these replaced HTML elements was designed that way for a reason.
My advice: Stay with simple HTML and CSS solutions and you will have ZERO problems as a web developer.
<input type="file" name="media" style="display-none" onchange="document.media.submit()">
I would normally use simple javascript to customize the file input tag.A hidden input field,on click of button,javascript call the hidden field,simple solution with out any css or bunch of jquery.
<button id="file" onclick="$('#file').click()">Upload File</button>
VISIBILITY:hidden TRICK
I usually go for the visibility:hidden trick
this is my styled button
<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>
this is the input type=file button. Note the visibility:hidden rule
<input type="file" id="upload" style="visibility:hidden;">
this is the JavaScript bit to glue them together. It works
<script>
$('#uploadbutton').click(function(){
$('input[type=file]').click();
});
</script>
Multiple file solution with converted filename
Bootstrap EXAMPLE
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 with 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 without 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;
});
});
the only way i can think of is to find the button with javascript after it gets rendered and assign a style to it
you might also look at this writeup
Here we use a span to trigger input of type file and we simply customized that span, so we can add any styling using this way.
Note that we use input tag with visibility:hidden option and trigger it in the 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>
Reference
Here is a solution, that also shows the chosen file name:
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; }
This is a nice way to do it with material / angular file upload.
You could do the same with a bootstrap button.
Note I used <a> instead of <button> this allows the click events to bubble up.
<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>
Maybe a lot of awnsers. But I like this in pure CSS with 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"/>
Fiddle: https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/
Don't be fooled by "great" CSS-only solutions that are actually very browser-specific, or that overlay the styled button on top of the real button, or that force you to use a <label> instead of a <button>, or any other such hack. JavaScript IS necessary to get it working for general usage. Please study how gmail and DropZone do it if you don't believe me.
Just style a normal button however you want, then call a simple JS function to create and link a hidden input element to your styled button.
<!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>
Notice how the above code re-links it after every time the user chooses a file. This is important because "onchange" is only called if the user changes the filename. But you probably want to get the file every time the user provides it.
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">
<style>
.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;
}
</style>
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)
I've found a very easy method to switch the file button to a picture.
You just label a picture and place it on top of the file button.
<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>
When clicking on the labeled image, you select the file button.
This week I also needed to custom the button and display the selected file name aside it, so after reading some of the answers above (Thanks BTW) I came up with the following implementation:
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;
};
});
Basically I'm working with ng-file-upload lib, Angular-wise I'm binding the filename to my $scope and giving it the initial value of 'No file chosen', I'm also binding the onFileSelect() function to my scope so when a file gets selected I'm getting the filename using ng-upload API and assign it to the $scope.filename.
Simply simulate a click on the <input> by using the trigger() function when clicking on a styled <div>. I created my own button out of a <div> and then triggered a click on the input when clicking my <div>. This allows you to create your button however you want because it's a <div> and simulates a click on your file <input>. Then use display: none on your <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");
});
How do you style an input type="file" button?
<input type="file" />
You don't need JavaScript for this! Here is a cross-browser solution:
See this example! - It works in Chrome/FF/IE - (IE10/9/8/7)
The best approach would be to have a custom label element with a for attribute attached to a hidden file input element. (The label's for attribute must match the file element's id in order for this to work).
<label for="file-upload" class="custom-file-upload">
Custom Upload
</label>
<input id="file-upload" type="file"/>
As an alternative, you could also just wrap the file input element with a label directly: (example)
<label class="custom-file-upload">
<input type="file"/>
Custom Upload
</label>
In terms of styling, just hide1 the input element using the attribute selector.
input[type="file"] {
display: none;
}
Then all you need to do is style the custom label element. (example).
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
1 - It's worth noting that if you hide the element using display: none, it won't work in IE8 and below. Also be aware of the fact that jQuery validate doesn't validate hidden fields by default. If either of those things are an issue for you, here are two different methods to hide the input (1, 2) that work in these circumstances.
Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.
Even the size of the input will not respond to the likes of:
<input type="file" style="width:200px">
Instead, you will need to use the size attribute:
<input type="file" size="60" />
For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.
UPDATE
Although it's difficult to style an <input> tag directly, this is easily possible with the help of a <label> tag. See answer below from #JoshCrozier: https://stackoverflow.com/a/25825731/10128619
follow these steps then you can create custom styles for your file upload form:
this is the simple HTML form(please read the HTML comments I have written here below)
<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>
then use this simple script to pass the click event to file input tag.
function getFile(){
document.getElementById("upfile").click();
}
Now you can use any type of styling without worrying about how to change default styles.
I know this very well because I have been trying to change the default styles for a month and a half. believe me, it's very hard because different browsers have different upload input tag. So use this one to build your custom file upload forms. Here is the full AUTOMATED 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>
All rendering engines automatically generate a button when an <input type="file"> is created. Historically, that button has been completely un-styleable. However, Trident and WebKit have added hooks through pseudo-elements.
Trident
As of IE10, the file input button can be styled using the ::-ms-browse pseudo-element. Basically, any CSS rules that you apply to a regular button can be applied to the pseudo-element. For example:
::-ms-browse {
background: black;
color: red;
padding: 1em;
}
<input type="file">
This displays as follows in IE10 on Windows 8:
WebKit
WebKit provides a hook for its file input button with the ::-webkit-file-upload-button pseudo-element. Again, pretty much any CSS rule can be applied, therefore the Trident example will work here as well:
::-webkit-file-upload-button {
background: black;
color: red;
padding: 1em;
}
<input type="file">
This displays as follows in Chrome 26 on OS X:
Hide it with css and use a custom button with $(selector).click() to activate the the browse button. then set an interval to check the value of the file input type. the interval can display the value for the user so the user can see whats getting uploaded. the interval will clear when the form is submitted [EDIT] Sorry i have been very busy was meaning to update this post, here is an example
<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;
});
});
::file-selector-button
https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button
This is a new selector that can be used to style the file selector button.
It has full support on recent browser versions.
input[type=file]::file-selector-button {
border: 2px solid #6c5ce7;
padding: .2em .4em;
border-radius: .2em;
background-color: #a29bfe;
transition: 1s;
}
input[type=file]::file-selector-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
<form>
<label for="fileUpload">Upload file</label>
<input type="file" id="fileUpload">
</form>
Here is another snippet that demonstrates different styling:
.input_container {
border: 1px solid #e5e5e5;
}
input[type=file]::file-selector-button {
background-color: #fff;
color: #000;
border: 0px;
border-right: 1px solid #e5e5e5;
padding: 10px 15px;
margin-right: 20px;
transition: .5s;
}
input[type=file]::file-selector-button:hover {
background-color: #eee;
border: 0px;
border-right: 1px solid #e5e5e5;
}
<form>
<div class="input_container">
<input type="file" id="fileUpload">
</div>
</form>
I felt that this answer was needed as most answers here are outdated.
$('.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>
You can reach your goals too without jQuery with normal JavaScript.
Now the newBtn is linkes with the html_btn and you can style your new btn like you want :D
If you are using Bootstrap 3, this worked for me:
See https://www.abeautifulsite.net/posts/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>
Which produces the following file input button:
Seriously, check out https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/
Working example here with native Drag and drop support : https://jsfiddle.net/j40xvkb3/
When styling a file input, you shouldn't break any of native interaction
the input provides.
The display: none approach breaks the native drag and drop support.
To not break anything, you should use the opacity: 0 approach for the input, and position it using relative / absolute pattern in a wrapper.
Using this technique, you can easily style a click / drop zone for the user, and add custom class in javascript on dragenter event to update styles and give user a feedback to let him see that he can drop a file.
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;
}
Here is a working example (with additional JS to handle dragover event and dropped files).
https://jsfiddle.net/j40xvkb3/
Hope this helped !
I am able to do it with pure CSS using below code. I have used bootstrap and 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>
ONLY CSS
Use this very simple and EASY
.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">
<label>
<input type="file" />
</label>
You can wrap your input type="file" inside of a label for the input. Style the label however you'd like and hide the input with display: none;
This approach gives you the whole flexibility! 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();
});
This hides the input-file button, but under the hood clicks it from another normal button, that you can obviously style like any other button. This is the only solution with no downside apart from a useless DOM-node. Thanks to display:none;, the input-button does not reserve any visible space in the DOM.
(I don't know anymore to whom to give props for this. But I got that idea from somewhere here on Stackoverflow.)
Put upload file button over your nice button or element and hide it.
Very simple and will work on any browser
<div class="upload-wrap">
<button type="button" class="nice-button">upload_file</button>
<input type="file" name="file" class="upload-btn">
</div>
Styles
.upload-wrap {
position: relative;
}
.upload-btn {
position: absolute;
left: 0;
opacity: 0;
}
Here is a solution which doesn't really style the <input type="file" /> element but instead uses a <input type="file" /> element on top of other elements (which can be styled). The <input type="file" /> element is not really visible hence, the overall illusion is of a nicely styled file upload control.
I came across this problem recently and despite the plethora of answers on Stack Overflow, none really seemed to fit the bill. In the end, I ended up customizing this so as to have a simple and an elegant solution.
I have also tested this on Firefox, IE (11, 10 & 9), Chrome and Opera, iPad and a few android devices.
Here's the 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>
Hope this helps!!!
This is simple with jquery. To give a code example of Ryan's suggestion with a slight modification.
Basic html:
<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">
Be sure to set the styling on the input when you're ready: opacity: 0
You can't set display: none because it needs to be clickable. But you can position it under the "new" button or tuck in under something else with z-index if you prefer.
Setup some jquery to click the real input when you click the image.
$('#image_icon').click(function() {
$('#the_real_file_input').click();
});
Now your button is working. Just cut and paste the value when changed.
$('input[type=file]').bind('change', function() {
var str = "";
str = $(this).val();
$("#filename").text(str);
}).change();
Tah dah! You may need to parse the val() to something more meaningful but you should be all set.
Here is a PURE CSS, Javascript-free, Bootstrap-free, 100% cross-browser solution! Just cut-and-paste one block of styles, then test your file upload control.
This solution does NOT attempt to hide then recreate the original HTML element like the other posts here do. It uses plain CSS without any circus tricks or third party tools to style the original file upload form control for all the major browsers. You do not need to even change your HTML code! Just cut-and-paste the code below into your web page to test it...
<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;/* fallback: older browsers like IE 1-8 need "em" */
padding: 0rem 0rem;/* older browsers dont know what "rem" is */
overflow: hidden; /* long file names overflow so just hide the end */
background: #fff;
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; /* Optional rollover color: 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: These "disabled" selectors blow up in IE so have to be separated from the same styles above. */
input[type="file"]:disabled {
margin: 0;
padding: 0em 0em;
padding: 0rem 0rem;
overflow: hidden; /* long file names overflow so just hide the end */
background: #ddd;
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 {
background: #ddd; /* disabled-readonly buttons should be grey */
border: 2px solid #999;
}
input[type="file"]:disabled:visited,
input[type="file"]:disabled:focus,
input[type="file"]:disabled:active {
background: #ddd; /* disabled-readonly buttons should be grey */
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>
<input type="file" id="fileupload" name="fileupload"
value="" tabindex="0" enctype="multipart/form-data"
accept="image/*" autocomplete="off" multiple="multiple"
aria-multiselectable="true" title="Multiple File Upload"
aria-label="Multiple File Upload" />
<br /><br />
<input disabled="disabled" type="file" id="fileupload"
name="fileupload" value="" tabindex="0"
enctype="multipart/form-data" accept="image/*"
autocomplete="off" multiple="multiple"
aria-multiselectable="true" title="Disabled Multiple File Upload"
aria-label="Disabled Multiple File Upload" />
This is what the file upload control looks like in Firefox, Chrome, and Edge using the CSS below. This is a very simple clean design. You can change it to look any way you like:
Internet Explorer gives you limited design control, but at least you can manipulate the control using CSS enough to change a few things, including rounded borders and colors:
The advantages to my solution are:
You stick with simple CSS to style the original HTML input control
You can see one or more file names in the file input textbox
Screen readers and ARIA-friendly devices can interact normally with your file upload control
You can set tabindex on your HTML element so its part of the tab order
Because you are using plain HTML and CSS, your file input button works perfectly in old and new browsers
ZERO JavaScript required!
Runs and loads lighting fast in even the oldest of browsers
Because your are not using "display:none" to hide the control, its file block stream data is never disabled from reaching the server in any old or new browser version known
You do not need goofy JavaScript tricks, Bootstrap, or to try and hide/recreate your file input control. That just destroys usability for everyone online. Styling the original HTML control means your file upload control is guaranteed to work well in 25 years worth of web browsers, old and new.
This is why you cannot trust all these scripted hacks here that erase, rewrite, or destroy HTML just to try and recreate some visual experience. That shows that you do not understand how HTML is used or why its been around for 30 years practically unchanged. You should never try and rewrite HTML's native form control functionality. Why? There is more to using natural HTML in websites than just manipulation of markup for some forced visual experience. The trade-offs of limited visual design in these replaced HTML elements was designed that way for a reason.
My advice: Stay with simple HTML and CSS solutions and you will have ZERO problems as a web developer.
<input type="file" name="media" style="display-none" onchange="document.media.submit()">
I would normally use simple javascript to customize the file input tag.A hidden input field,on click of button,javascript call the hidden field,simple solution with out any css or bunch of jquery.
<button id="file" onclick="$('#file').click()">Upload File</button>
VISIBILITY:hidden TRICK
I usually go for the visibility:hidden trick
this is my styled button
<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>
this is the input type=file button. Note the visibility:hidden rule
<input type="file" id="upload" style="visibility:hidden;">
this is the JavaScript bit to glue them together. It works
<script>
$('#uploadbutton').click(function(){
$('input[type=file]').click();
});
</script>
Multiple file solution with converted filename
Bootstrap EXAMPLE
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 with 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 without 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;
});
});
the only way i can think of is to find the button with javascript after it gets rendered and assign a style to it
you might also look at this writeup
Here we use a span to trigger input of type file and we simply customized that span, so we can add any styling using this way.
Note that we use input tag with visibility:hidden option and trigger it in the 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>
Reference
Here is a solution, that also shows the chosen file name:
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; }
This is a nice way to do it with material / angular file upload.
You could do the same with a bootstrap button.
Note I used <a> instead of <button> this allows the click events to bubble up.
<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>
Maybe a lot of awnsers. But I like this in pure CSS with 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"/>
Fiddle: https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/
Don't be fooled by "great" CSS-only solutions that are actually very browser-specific, or that overlay the styled button on top of the real button, or that force you to use a <label> instead of a <button>, or any other such hack. JavaScript IS necessary to get it working for general usage. Please study how gmail and DropZone do it if you don't believe me.
Just style a normal button however you want, then call a simple JS function to create and link a hidden input element to your styled button.
<!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>
Notice how the above code re-links it after every time the user chooses a file. This is important because "onchange" is only called if the user changes the filename. But you probably want to get the file every time the user provides it.
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">
<style>
.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;
}
</style>
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)
I've found a very easy method to switch the file button to a picture.
You just label a picture and place it on top of the file button.
<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>
When clicking on the labeled image, you select the file button.
This week I also needed to custom the button and display the selected file name aside it, so after reading some of the answers above (Thanks BTW) I came up with the following implementation:
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;
};
});
Basically I'm working with ng-file-upload lib, Angular-wise I'm binding the filename to my $scope and giving it the initial value of 'No file chosen', I'm also binding the onFileSelect() function to my scope so when a file gets selected I'm getting the filename using ng-upload API and assign it to the $scope.filename.
Simply simulate a click on the <input> by using the trigger() function when clicking on a styled <div>. I created my own button out of a <div> and then triggered a click on the input when clicking my <div>. This allows you to create your button however you want because it's a <div> and simulates a click on your file <input>. Then use display: none on your <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");
});