I have this form I created in HTML (called form.html) written in google apps script and I also have a stylesheet (CSS) to go with that. All is working well when I have the CSS in the same HTML-file as the form. However if I want to put my stylesheet in a separate HTML-file (called Stylesheet.html) and then include it in the form.html by using a scriplet
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
or even creating an 'include' function:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.getContent();
}
and then in form.html
<?!= include(Stylesheet) ?>
..it doesn't seem to work. What's even worse the scriplet shows up on the form.
Maybe there is something basic I am overlooking, but I can't wrap my head around this. Any ideas ?
Here is the code so far...
function doGet() {
return HtmlService.createHtmlOutputFromFile('Formulier')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.getContent();
}
function materiaalLijst(afdnum) {
return SpreadsheetApp.openById('1l6MKG61GHMFSZrOg04W4KChpb7oZBU9VKp42FPXmldc')
.getSheetByName('RESERVATIE')
.getDataRange()
.getValues()
.map(function (v) {
return v[Number(afdnum) - 1]
})
.splice(1);
}
//work in progress
function processForm(form) {
Logger (form); //array containing form elements
}
<style>
form {
/* Just to center the form on the page */
margin: 0 auto;
width: 400px;
/* To see the outline of the form */
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
form div + div {
margin-top: 1em;
}
label {
/* To make sure that all labels have the same size and are properly aligned */
display: inline-block;
width: 90px;
text-align: right;
}
input, textarea {
/* To make sure that all text fields have the same font settings
By default, textareas have a monospace font */
font: 1em sans-serif;
/* To give the same size to all text field */
width: 300px;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* To harmonize the look & feel of text field border */
border: 1px solid #999;
}
input:focus, textarea:focus {
/* To give a little highlight on active elements */
border-color: #000;
}
textarea {
/* To properly align multiline text fields with their labels */
vertical-align: top;
/* To give enough room to type some text */
height: 5em;
/* To allow users to resize any textarea vertically
It does not work on every browsers */
resize: vertical;
}
</style>
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
<form id="myForm">
<!-- Text input field -->
<div>
<label for="name">Naam:</label>
<input type="text" id="name" placeholder="Voornaam + naam" required>
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" required>
</div>
<div>
<label for="Afdeling">Afdeling:</label>
<input type="radio" id="1" name="Afd" value="Oostende">Oostende
<input type="radio" id="2" name="Afd" value="Brugge">Brugge
<input type="radio" id="3" name="Afd" value="Westhoek">Westhoek
</div>
<div>
<label for="datepicker">Datum:</label>
<input type="date" id="resdatum" required>
</div>
<div>
<label for="timepicker">Uur:</label>
<input type="time" id="restijd" required>
</div>
<div>
<label for="Frequentie">Frequentie:</label>
<input type="radio" name="freq" value="éénmalig" required>éénmalig
<input type="radio" name="freq" value="meermaals">voor meerdere weken
</div>
<div>
<label for="Materiaal">Materiaal:</label>
<select id="materiaal" name="materiaalselectie" required>
<option value="notSel">Kies..</option>
</select>
</div>
<div>
<!-- The submit button. It calls the server side function uploadfiles() on click -->
<input type="submit" id="verzenden" name="verzenden" class="verzenden" value="Reservatie verzenden" >
</div>
<div id="output"></div>
</form>
<div id="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$("input:radio[name=Afd]").click(function() {
go(this.id);
});
function go(idAfd) {
google.script.run.withSuccessHandler(showList).materiaalLijst(idAfd);
}
function showList(things) {
var list = $('#materiaal');
list.empty();
for (var i = 0; i < things.length; i++) {
list.append('<option value="' + things[i] + '">' + things[i] + '</option>');
}
}
//below is work in progress...
$('#myForm').submit(function(e) {
e.preventDefault();
var arr =[];
//var fields = $( ":input" ).serializeArray();
$.each( $( ":input" ).serializeArray(), function( i, field ) {
arr.push( field.value);
});
var json = JSON.stringify($('#myForm').serializeArray());
google.script.run.processForm(arr);
alert(arr);
})
</script>
The result with CSS IN the form.html
and here is the CSS in a separate .html file and included
in form.html with
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
You're doing this right:
Your css file must be an HTML file, as those are the only type supported by HtmlService. If you look at the starter scripts, you'll find that they have Stylesheet.html, with content:
<!-- This CSS package applies Google styling; it should always be included. -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
...
</style>
You know the google css is working if your sidebar or dialog looks pretty much like google stuff - same font, same text size. To have an action button be blue, you need to add the appropriate class to it, class="action".
Why isn't yours working?
Get ready for a face-palm moment...
You're using scriptlets, part of the Html Service templated HTML. They require interpretation, which is not done by HtmlService.createHtmlOutputFromFile(). (That's why you see the scriptlet line literally.)
Instead, you need to read the file containing scriptlets as a template, and then .evaluate() it.
function doGet() {
return HtmlService.createTemplateFromFile('form')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
To display the google-themed action button, include the Apps Script CSS and add "action" class:
<input type="submit" id="verzenden" name="verzenden" class="action verzenden" value="Reservatie verzenden" >
How about to name it Stylesheet.css?
And try to include it via normal HTML in the header.
<link rel="stylesheet" href="Stylesheet.css" type="text/css">
HTH
I have about 1000 Textfields on our page, and need to display a Tooltip above the textfield that the user is currently typing in.
It sounds simple, but I'm having difficulty figuring out how to display it on top of everything else on the page and without breaking flow of the document.
I can't use any external libraries for this either, which makes it a little more difficult. I am only allowed to use pure JS (or a language that compiles to pure JS, such as TypeScript).
Does anyone have any links, tutorials or anything like that? It would be very helpful.
Thank you
Edit:
I am aware that you can use the Title attribute on an element, however this tooltip needs to have more than just text inside it and needs to be bigger and directly above the textbox.
Something like this might help you:
http://jsfiddle.net/ysuw5/
<div id="container">
<input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf" /><br />
<input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf2" /><br />
<input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf3" /><br />
<input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf4" /><br />
<div id="tooltip"></div>
</div>
function theFocus(obj) {
var tooltip = document.getElementById("tooltip");
tooltip.innerHTML = obj.title;
tooltip.style.display = "block";
tooltip.style.top = obj.offsetTop - tooltip.offsetHeight + "px";
tooltip.style.left = obj.offsetLeft + "px";
}
function theBlur(obj) {
var tooltip = document.getElementById("tooltip");
tooltip.style.display = "none";
tooltip.style.top = "-9999px";
tooltip.style.left = "-9999px";
}
This is clearly very narrow-minded and would need to be modified to fit exactly what you need. I didn't bother binding the focus and blur events with Javascript - it would be better than putting them in the HTML.
You can use “CSS tooltips” in many ways. A relatively simple idea is to place the hint content in a div, initially hidden with CSS, right before the field. Then you need an onfocus event handler that changes that div to visible (and an onblur handler that makes it invisible again). You would have a container for the hint and the field and declare that container as relatively position, to make it possible to position the hint “absolutely” (that is, relatively to the container).
Example (jsfiddle):
<!DOCTYPE HTML>
<meta charset=utf-8>
<style>
.textfield {
position: relative;
}
.textfield .hint {
display: none;
position: absolute;
width: 10em;
bottom: 1.3em;
background: #ff9;
padding: 0 0.2em;
border: solid 1px;
}
</style>
<script>
function hint(elem) {
elem.parentNode.firstElementChild.style.display = 'block';
}
function unhint(elem) {
elem.parentNode.firstElementChild.style.display = 'none';
}
</script>
<p>This is just some filler text.
<table>
<tr>
<td><label for=bar>Bar</label>
<td>
<div class=textfield>
<div class=hint>This is hint text for the Bar field.</div>
<input id=bar name=bar onfocus="hint(this)" onblur="unhint(this)">
</div>
<tr>
<td><label for=foo>Foo</label>
<td>
<div class=textfield>
<div class=hint>This is hint text for the Bar field.</div>
<input id=foo name=foo onfocus="hint(this)" onblur="unhint(this)">
</div>
</table>
(When using a table to structurize your form, in this approach you need to remember that a CSS positioning does not work for table cells. This is why you cannot use the td element as wrapper but need to use div inside it.)
Here is the code I have: http://jsfiddle.net/Draven/rEPXM/23/
I'd like to know how I can hide that Add submit button until I click the + image to add input boxes to the form.
I don't want to add the submit button next to the input box because I want to be able to add multiple input boxes and submit them all when I click Add.
HTML
<div id="left">
<div class="box">
<div class="boxtitle"><span class="boxtitleleftgap"> </span><span class="boxtitlebulk"><span class="boxtitletext">Folders</span><div style="float: right; margin-top: 4px;"><div class="addplus"> </div></div></span></div>
<div class="boxcontent">
<form method="post" id="folderform" action="page.php?action=list-volunteer-apps" name="folderform">
<a class="even" href="page.php?action=list-volunteer-apps&folder=2">Folder 2 <span class="text">(1)</span></a><a class="even" href="page.php?action=list-volunteer-apps&folder=1">Folder 1 <span class="text">(0)</span></a>
<div id="foldercontainer"><input type="submit" value="Add"></div>
</form>
</div>
</div>
</div>
jQuery
function AddFolder() {
$('#foldercontainer').append('<input name="folder[]" type="text" size="20" />');
}
Just give the button an ID, and make it start hidden
<input type="submit" id="addButton" value="Add" style="display: none;">
Then use the show() jQuery method:
$("#addButton").show();
http://jsfiddle.net/TcFhy/
Here's a way you could do this... also, cleaned up the method used for making these input boxes a bit:
http://jsfiddle.net/mori57/4JANS/
So, in your html you might have:
<div id="foldercontainer">
<input id="addSubmit" type="submit" value="Add">
<input id="folderName" name="folder[]" type="text" size="20" style="" />
</div>
and your CSS might be:
#foldercontainer #addSubmit {
display:none;
}
#foldercontainer #folderName {
display:none;
width: 120px;
background: #FFF url(http://oi47.tinypic.com/2r2lqp2.jpg) repeat-x top left;
color: #000;
border: 1px solid #cdc2ab;
padding: 2px;
margin: 0px;
vertical-align: middle;
}
and your script could be:
// set up a variable to test if the add area is visible
// and another to keep count of the add-folder text boxes
var is_vis = false,
folderAddCt = 0;
function AddFolder() {
if(is_vis == false){
// if it's not visible, show the input boxes and
$('#foldercontainer input').show();
// set the flag true
is_vis = true;
} else {
// if visible, create a clone of the first add-folder
// text box with the .clone() method
$folderTB = $("#folderName").clone();
// give it a unique ID
$folderTB.attr("id","folderName_" + folderAddCt++);
// and append it to the container
$("#foldercontainer").append($folderTB);
}
}
I moved the button out of the folder wrap, and I am showing it when you add a new folder. This way the button will stay at the bottom when adding new folders. I also removed the inline style, and replaced it with a class.
This is used to display the button, just add it to the AddFolder() function:
$('#addBtn').show();
I am hiding it with CSS like this:
#addBtn { display: none;}
I moved the button out of the #foldercontainer, this way it will always stay at the bottom when you add multiple folders, as you wanted:
<div id="foldercontainer"></div>
<input id="addBtn" type="submit" value="Add">
Look here for the jsFiddle: http://jsfiddle.net/kmx4Y/1/
$('form#folderform input[type=submit]').hide();
Then show the add button after you click the submit
http://jsfiddle.net/SQh8L/
I can't seem to figure out any way to remove the "No file selected" text that shows up next to inputs of type "file".
Do you guys know any way how to remove this text?
input[type='file'] {
color: transparent;
}
Enjoy
There is no cross-browser way to do this. The "no file selected" text is in the implementation-defined part of the widget, and I don't believe that most browsers offer much in the way of browser-specific customization. On the other hand, you could simply use CSS to cover the text with something when the value attribute is empty.
You can do this by defining a width to the input and hiding the exceeding content (the undesired "No file selected" text).
input {
width: 132px;
overflow:hidden;
}
Here is the demonstration on jsfiddle.
Beware: each language has its own default text and it may render different input sizes. In brazilian portuguese that 132px width is fine!
My answer was based on this similar question on stackoverflow.
You can replace the file field with a button with the answer to this question: file upload button without input field?
CSS
<style>
#image_file{
position: relative;
width: 188px;
border: 1px solid #BBB;
margin: 1px;
cursor: pointer;
float: left;
}
</style>
HTML
<input id="image_file" onclick="getFile()" onfocus="this.blur()" value=""/>
<div style='height: 0px;width: 0px; overflow:hidden;'>
<input type="file" id="PinSpot_file">
</div>
<input type="button" onclick="getFile()" style="background-color: #DDD;" value="Browser" >
JAVASCRIPT
function getFile(){
document.getElementById("PinSpot_file").click();
}
// Event when change fields
$('#PinSpot_file').live('change', function(e) {
var file = this.value;
var fileName = file.split("\\");
document.getElementById("image_file").value = fileName[fileName.length-1];
//AJAX
}
This is a really good hack and its a lot cleaner.
HTML
<div id="file_info' style='display:inline;'>Browse</div>
<input type="file" name='file[]' multiple style='opacity: 0;' onchange='displayFileName()'/>
JS
function displayFileName() {
var files = $('input[type="file"]')[0].files;
document.getElementById('file_info').innerHTML = files.length + " images to upload";`
}
Well, since there is no way to completely disable the text, I'd suggest either placing an element over the text or try the following solution..
CSS
input[type="file"] {
width: 90px; /* Keep it under 100px in order to hide the unwanted text. */
}
and add an html inline-title attribute to the element to hide the "No File Chosen" hover text.
HTML
<input type="file" id="FileId" title="">
or, you could do it all with JavaScript.
JS
document.addEventListener('DOMContentLoad', myFunction);
function myFunction() {
const FilePicker = document.getElementById('FileId');
FilePicker.style.width = "90px";
FilePicker.title = ""; // Leave This Empty
}
You can try this. Its work for me firefox browser
<style type="">
input[type='file'] {
color: transparent;
}
</style>
Is there a way to style (or script) <input type=file /> element to have visible only "Browse" button without text field?
Thanks
Edit:
Just to clarify why to I need this. I'm using multi file upload code from http://www.morningz.com/?p=5 and it doesn't need input text field because it never has value. Script just adds newly selected file to collection on page. It would look much better without text field, if it's possible.
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
This will surely work as I have used it in my projects.
I was having a heck of a time trying to accomplish this. I didn't want to use a Flash solution, and none of the jQuery libraries I looked at were reliable across all browsers.
I came up with my own solution, which is implemented completely in CSS (except for the onclick style change to make the button appear 'clicked').
You can try a working example here: http://jsfiddle.net/VQJ9V/307/ (Tested in FF 7, IE 9, Safari 5, Opera 11 and Chrome 14)
It works by creating a big file input (with font-size:50px), then wrapping it in a div that has a fixed size and overflow:hidden. The input is then only visible through this "window" div. The div can be given a background image or color, text can be added, and the input can be made transparent to reveal the div background:
HTML:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>
CSS:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
Let me know if there are any problems with it and I'll try to fix them.
I wasted my day today getting this to work. I found none of the solutions here working each of my scenarios.
Then I remembered I saw an example for the JQuery File Upload without text box. So what I did is that I took their example and stripped it down to the relevant part.
This solution at least works for IE and FF and can be fully styled. In the below example the file input is hidden under the fancy "Add Files" button.
<html>
<head>
<title>jQuery File Upload Example</title>
<style type="text/css">
.myfileupload-buttonbar input
{
position: absolute;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
border-width: 0 0 100px 200px;
opacity: 0.0;
filter: alpha(opacity=0);
-o-transform: translate(250px, -50px) scale(1);
-moz-transform: translate(-300px, 0) scale(4);
direction: ltr;
cursor: pointer;
}
.myui-button
{
position: relative;
cursor: pointer;
text-align: center;
overflow: visible;
background-color: red;
overflow: hidden;
}
</style>
</head>
<body>
<div id="fileupload" >
<div class="myfileupload-buttonbar ">
<label class="myui-button">
<span >Add Files</span>
<input id="file" type="file" name="files[]" />
</label>
</div>
</div>
</body>
</html>
Add a label tag with for attribute assign the for attribute value to the file input button.
Now when you click the label, the browser will open up the file browse dialogue popup automatically.
Note: Hide the file input button using CSS.
Check the live demo below.
$('#imageUpload').change(function() {
readImgUrlAndPreview(this);
function readImgUrlAndPreview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').removeClass('hide').attr('src', e.target.result);
}
};
reader.readAsDataURL(input.files[0]);
}
});
.hide {
display: none;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid #ddd;
box-shadow: 2px 2px 10px #eee;
border-radius: 4px;
}
.btn-large {
padding: 11px 19px;
font-size: 17.5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#imagePreview {
margin: 15px 0 0 0;
border: 2px solid #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div clas="file_input_wrap">
<input type="file" name="imageUpload" id="imageUpload" class="hide" />
<label for="imageUpload" class="btn btn-large">Select file</label>
</div>
<div class="img_preview_wrap">
<img src="" id="imagePreview" alt="Preview Image" width="200px" class="hide" />
</div>
Hide the input-file element and create a visible button that will trigger the click event of that input-file.
Try this:
CSS
#file { width:0; height:0; }
HTML:
<input type='file' id='file' name='file' />
<button id='btn-upload'>Upload</button>
JAVASCRIPT(jQuery):
$(function(){
$('#btn-upload').click(function(e){
e.preventDefault();
$('#file').click();}
);
});
I tried to implement the top two solutions, and it ended up being a HUGE waste of time for me. In the end, applying this .css class solved the problem...
input[type='file'] {
color: transparent;
}
Done! super clean and super simple...
That's going to be very hard. The problem with the file input type is that it usually consists of two visual elements, while being treated as a single DOM-element. Add to that that several browsers have their own distinct look and feel for the file input, and you're set for nightmare. See this article on quirksmode.org about the quirks the file input has. I guarantee you it won't make you happy (I speak from experience).
[EDIT]
Actually, I think you might get away with putting your input in a container element (like a div), and adding a negative margin to the element. Effectively hiding the textbox part off screen.
Another option would be to use the technique in the article I linked, to try to style it like a button.
Fix to work in all browsers
RESOLVED:
<input type = "button" value = "Choose image"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>
I have tested in FF, Chrome & IE - working fine, applied styles too :D
Here is my good ol' remedy:
<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById('myFile').click();">Browse</button>
At least it worked in Safari.
Plain and simple.
Another easy way of doing this. Make a "input type file" tag in html and hide it. Then click a button and format it according to need. After this use javascript/jquery to programmatically click the input tag when the button is clicked.
HTML :-
<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>
JavaScript :-
document.getElementById('button').addEventListener("click", function() {
document.getElementById('file').click();
});
jQuery :-
$('#button').click(function(){
$('#file').click();
});
CSS :-
#button
{
background-color: blue;
color: white;
}
Here is a working JS fiddle for the same :- http://jsfiddle.net/32na3/
I used some of the code recommended above and after many hours of waisting my time, I eventually came to a css bag free solution.
You can run it over here - http://jsfiddle.net/WqGph/
but then found a better solution - http://jsfiddle.net/XMMc4/5/
<input type = "button" value = "Choose image #2"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>
You could label an image so when you click on it the click event of the button will be triggered. You can simply make the normal button invisible:
<form>
<label for="fileButton"><img src="YourSource"></label> <!--You don't have to put an image here, it can be anything you like-->
<input type="file" id="fileButton" style="display:none;"/>
</form>
It worked for me on all browsers, and is very easy to use.
You can dispatch the click event on a hidden file input like this:
<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;" >Click to upload!</div>
<!-- hide input[type=file]!-->
<div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
<input type="submit" value='submit' >
</form>
<script type="text/javascript">
var btn = document.getElementById("yourBtn");
var upfile = document.getElementById("upfile");
btn.addEventListener('click',function(){
if(document.createEvent){
var ev = document.createEvent('MouseEvents');
ev.initEvent('click',true,false);
upfile.dispatchEvent(ev);
}else{
upfile.click();
}
});
</script>
HTML:
<input type="file" name="upload" id="upload" style="display:none"></input>
<button id="browse">Upload</button>
JQUERY
$(document).ready(function(){
$("#browse").click(function(){
$("#upload").click();
});
});
Hope this works :)
This HTML code show up only Upload File button
<form action="/action_page.php">
<input type="button" id="id" value="Upload File" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/>
</form>
You can give the input element a font opacity of 0. This will hide the text field without hiding the 'Choose Files' button.
No javascript required, clear cross browser as far back as IE 9
E.g.,
input {color: rgba(0, 0, 0, 0);}
Ive a really hacky solution with this...
<style type="text/css">
input[type="file"]
{
width: 80px;
}
</style>
<input id="File1" type="file" />
The problem is the width attribute that is hiding the text field will obvously vary between browsers, vary between Windows XP themes and so on. Maybe its something you can work with though?...
I know this is an old post but a simple way to make the text dissapear is just to set text color to that of your background.
eg if your text input background is white then:
input[type="file"]{
color:#fff;
}
This will not effect the Choose File text which will still be black due to the browser.
There is a simple and hacky way to show only the file input button while keeping the render and translations of this file input button :
Make the text that is displayed after a file input invisible using a the color transparent.
<input type="file" style="color: transparent" />
my solution is just to set it within a div like "druveen" said, however i ad my own button style to the div (make it look like a button with a:hover) and i just set the style "opacity:0;" to the input. Works a charm for me, hope it does the same for you.
This works for me:
input[type="file"] {
color: white!important;
}
I just styled an input file with width: 85px, and the text field disappeared at all
Select Logo <input type="file" id="logo">
$("#logo").css('opacity','0');
$("#select_logo").click(function(){
$().trigger('click');
return false;
});
For me, the simplest way is using a font color like background color. Simple, not elegant, but usefull.
<div style="color:#FFFFFF"> <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>
So here's the best way to do this FOR ALL BROWSERS:
Forget CSS!
<p>Append Image:</p>
<input type="button" id="clickImage" value="Add Image" />
<input type="file" name="images[]" id="images" multiple />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script>
<script>
$('#images').hide();
$('#clickImage').click( function() {
$('#images').trigger('click');
});
</script>
All these answers are cute, but CSS won't work since it isn't the same across all browsers and devices, the first answer I wrote will work in everything but Safari. To get it to work accross all browsers all the time it must be created dynamically and recreated every time you want to clear the input text:
var imageDiv = document.createElement("div");
imageDiv.setAttribute("id", "imagediv");
imageDiv.style.cssText = 'position:relative; vertical-align: bottom;';
var imageText = document.createTextNode("Append Image:");
var newLine = document.createElement("br");
var image = document.createElement("input");
image.setAttribute("type", "file");
image.setAttribute("id", "images");
image.setAttribute("name", "images[]");
image.setAttribute("multiple", "multiple");
imageDiv.appendChild(imageText);
imageDiv.appendChild(newLine);
imageDiv.appendChild(image);
questionParagraph.appendChild(imageDiv);
The answer of tmanthey is quite good, except that you can't play with border-width in Firefox v20. If you see the link (demo, can't really show here) they solved the problem using font-size=23px, transform:translate(-300px, 0px) scale(4) for Firefox to get the button bigger.
Other solutions using .click() on a different div is useless if you want to make it a drag'n'drop input box.
There are several valid options here but thought I would give what I have come up with while trying to fix a similar issue. http://jsfiddle.net/5RyrG/1/
<span class="btn fileinput-button">
<span>Import Field(s)</span>
<input id="fileupload" type="file" name="files[]" onchange="handleFiles(this.files)" multiple>
</span>
<div id="txt"></div>
function handleFiles(files){
$('#txt').text(files[0].name);
}
I wrote this:
<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'>
<div style="width: 0; height: 0; overflow: hidden;">
<input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" />
</div>
</form>
<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />
Work fine in all browsers, no jQuery, no CSS.
Here is a simplified version of #ampersandre's popular solution that works in all major browsers.
Asp.NET markup
<asp:TextBox runat="server" ID="FilePath" CssClass="form-control"
style="float:left; display:inline; margin-right:5px; width:300px"
ReadOnly="True" ClientIDMode="Static" />
<div class="inputWrapper">
<div id="UploadFile" style="height:38px; font-size:16px;
text-align:center">Upload File</div>
<div>
<input name="FileUpload" id="FileInput" runat="server"
type="File" />
</div>
</div>
<asp:Button ID="UploadButton" runat="server"
style="display:none" OnClick="UploadButton_Click" />
</div>
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />
JQuery Code
$(document).ready(function () {
$('#UploadFile').click(function () {
alert('UploadFile clicked');
$('[id$="FileInput"]').trigger('click');
});
$('[id$="FileInput"]').change(function (event) {
var target = event.target;
var tmpFile = target.files[0].name;
alert('FileInput changed:' + tmpFile);
if (tmpFile.length > 0) {
$('#hdnFileName').val(tmpFile);
}
$('[id$="UploadButton"]').trigger('click');
});
});
css code
.inputWrapper {
height: 38px;
width: 102px;
overflow: hidden;
position: relative;
padding: 6px 6px;
cursor: pointer;
white-space:nowrap;
/*Using a background color, but you can use a background image to represent
a button*/
background-color: #DEDEDE;
border: 1px solid gray;
border-radius: 4px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
Uses a hidden "UploadButton" click trigger for server postback with standard . The with "Upload File" text pushes the input control out of view in the wrapper div when it overflows so there is no need to apply any styles for the "file input" control div. The $([id$="FileInput"]) selector allows section of ids with standard ASP.NET prefixes applied. The FilePath textbox value in set from server code behind from hdnFileName.Value once file is uploaded.