I am trying to create a file upload field that has a little bit of style to it, but I seem to be having problems finding examples of this. I know part of the reason is that the field itself varies from browser to browser.
Any ideas how to do this? Or is there a way to do this without using a file element of a form that can be styled?
If what you mean is the text field for the file names, you can use the input[type=file] selector in the css files. For example :
input[type=file] { background-color: red; }
If what you mean is the file selection dialog box, I think it's browser/OS dependent and there's little (if any) you can do about it.
I have come up on this problem before. Unfortunately, file uploads are nearly impossible to style consistently across browsers. As of CSS 2, I think, the W3C standard specifically leaves behavior undefined--think of how many ways it would need to be implemented on different platforms. Firefox, for example, generates anonymous button and input elements inside the file upload element which only inherit some of the properties that you set on the upload element itself.
You can get some to work using, for example, Furuno's method, but know that the behavior will be spotty and differ widely across platforms/browsers.
Here's some links I found:
QuirksMode Article
One Extra Pixel Article (look for the file input styling section)
This would fit for your requirement.
If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field
This tiny plugin will display the file input field as a bootstrap button (with configurable classes) and will show selected file names (or selection errors) beautifully.
Additionally you can set various restrictions using simple data-attributes or JS settings.
e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.
Related
There are several topics* about setting up a max file size for a input type=file, but there is apparently no pure-standard HTML way to do so (nothing in the HTML spec).
So, is there any pure-HTML way to set a max file size on a input type="file"?
Is there a request for such feature, like a maxsize="..." attribute to let the browser filter out the files the user can selected, or do we have to stick to Javascript File API for years (or ever)?
*Topics:
JS File API: Limit the size of an file upload (html input) or How to check file input size with jQuery?
HTML never-saw-that-in-any-standard: HTML Upload MAX_FILE_SIZE does not appear to work
This is not part of the HTML spec, so there is no "pure HTML" way to do this.
I could only find this mention from 2013 with no reaction. Couldn't find any mentions in https://github.com/whatwg/html/issues
Sounds like it's something you could suggest, see FAQ - Is there a process for adding new features to a specification? for the recommended way to suggest new features to the working group. Please post the link to the discussion here if you do bring it up.
Though since there's a JS workaround, I guess this won't be high on anyone's to-do list.
I recently downloaded a code and it shows
<button data-effect="st-effect-4">Slide along</button>
From what I figured out "st-effect-4" is a class name but can anyone tell me what this data-effect is for?
HTML5 allows for custom attributes, as long as they begin with "data-". This is a custom attribute with a specific value.
Those are called HTML5 Custom Data attributes.
Custom data attributes are intended to store custom data private to
the page or application, for which there are no more appropriate
attributes or elements. These attributes are not intended for use by
software that is independent of the site that uses the attributes.
Every HTML element may have any number of custom data attributes
specified, with any value.
The reason why you can't find it in Google is because those attribute are custom attributes generated by user for there own use.
It's not for anything.
HTML5 specifies that (just about) any element can have any "data-*" attributes it wants, which can hold any values they want (as long as they can be treated like strings, to store on the element).
So that might be part of a library, or it might just be somebody's CSS for a selector like:
button[data-effect] { background : blue; }
button[data-effect="st-effect-4"]:active { background : purple; }
Or it's being used as a query selector, in JS, for a game's controls...
Who knows?
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
These attributes are not intended for use by software that is independent of the site that uses the attributes.
Every HTML element may have any number of custom data attributes specified, with any value.
For Mary Lou's tutorial - this is to control the animation that brings in the menu.
This can be re-assigned to other trigger elements - however the code that makes it live is the DIV element that comes just before - st-trigger-effects.
If you look through the code and the CSS that controls it, you will be able to re-assign that to where-ever you need to use it.
I am currently using this in a bootstrap boilerplate for a University project.
src: http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/
#myThemeBackground = #ddd;
div#box1 { background: #myThemeBackground; }
I'm using LESS in order to use variables for my css. It works fine, but I'm wondering if there's a way for me to change the "myThemeBackground" dynamically at runtime via javascript or something.
So say if the user chooses a custom color for the background I'd like the entire skin to change.
Note: this is for dynamically theming/skinning an application where the user chooses the color for the background for example and then the whole app changes (without a page refresh)
You can modify Less variables on the fly using the modifyVars method:
less.modifyVars({ myThemeBackground : '#000' });
I usually grab the CSS generated by LESS and include that in a file to optimize the web page loading speed. In fact, I use LESS.app for Mac to generate my CSS.
To my knowledge, part of the solution would involve including less.js file to your page. This in turn means that generating the style of the page would be slow and the caching might cause you some trouble too...
I would humbly suggest generating multiple CSS stylesheets with LESS and include these files when needed with JavaScript.
The only solution I can think of is to change the text you render with less.js, with:
less.refreshStyles()
Change the text in the file or in the less snippet of styling.
Read more about it here:
Load less.js rules dynamically
It is relatively straight forward to iterate through IHTMLStyleSheetsCollection, IHTMLStyleSheet, IHTMLStyleSheetRulesCollection etc. of IHTMLDocument2 to obtain list of all styles in current document.
Any ideas on how to get a list of only used styles in the document? And to be more precise, I am looking for how to find out which images from the css files are being used in the document.
There is a program that says it is able to do this (determine which css images are being used) if IE8/IE9 is installed.
Thanks
Ok I have found an answer to this:
Recent browser versions (FF 3.5, IE 8) have implemented a querySelector method that can be used to query if a selector is used on a page.
see: https://developer.mozilla.org/En/DOM/Document.querySelector for more info.
I have problem with <input type="file" /> in Chrome - it does not show the textbox near the 'browse' button. What is a best way to show a standard file input (textbox+button) in Chrome?
This is the default behavior of Google chrome as well as Safari. Read this blog for a solution
The box is there, although it is not designed.
It might be on the "wrong" side of the window, but it's there.
Just for the matter - put a border around it - and you'll see it's there.
<input type="file" style="border: solid 1px red">
Also, after you select a file - you get the name of it.
<input type="file"/> has different visual appearance depending on the browser. On some browsers it is a text field with a button in others its just a button. Since the element isn't very styleable there isn't much you can do about it.
If you really want a file upload to look/behave different from the default implementation flash is the way to go.
For example many sites use sfwUpload. For full styleing freedom, you can make it invisible and place it on top of a html button via positioning.
Another way to work with the file upload inputs are to make them invisible via visibility: hidden, position them on top of other elements and thus forgo the use of flash, but the implementations are rarely very nice, so i wouldn't recommend it.
The file input element is styled differently depending on your browser (and probably OS - I've only ever used Windows). If you look at the same page with a file input element in FF, IE and Chrome, it will appear differently in each browser.
Why do you need to display the textbox anyway? In FF and IE you can't type directly into it anyway, so the only usage would be to display the filepath of the selected file; which Chrome already does for you, just not in a box.
I found a link from someone else who was having this problem, solution here.
It doesn't specifically mention chrome, but safari does the same thing apparently. (The link was an accepted answer posted in a chrome discussion)
edit: wow, second time this morning that I've been out googled by another member! at least questions are getting answered!
You could override the default behaviour and swap the control appearence alltogether. Found this today researching how to edit the css on fileupload.
Most of the times type file got display:none style. In that case use !important to display the input field.
<input id="cv_file" type="file" name="cv" style="display:block !important;"/>
Sometimes it is just caused by a javascript code similar to this one:
function someOnClickHandler(e)
{
e.preventDefault(); // it kills the file dialog
}
// somewhere:
$('.some-selector-which-contains-the-file-elem').on('click', someOnClickHandler);