Add support for styling input file fields.
A custom element is added behind the browser default input file field,
and the file field is made transparent to create the illusion of a
custom element. Options can be passed to extend the defaults.
- Source:
- lib/file/File.js, line 54
Example
var DEFAULTS = {
active: true, // active by default
ready: function() {}, // callback when module is ready.
// Thats the default 'size' for a button
// it is used to address some issues on firefox to apply the correct size.
'BUTTON_BROWSER_SIZE': 36,
customEle: 'a', // default element for handle.
containerEle: 'div', // default element for container.
autoHide: true, // will auto hide html element by default
classPrefix: 'custom-', // prefix used for class.
holderTxt: "Upload..", // default text for input file placeholder
hideCss: { // styles can be overwritten or added.
opacity: '0',
filter: 'alpha(opacity=0)',
position: 'absolute',
top: '0px',
left: '0px',
'-moz-opacity': '0',
'-khtml-opacity': '0'
},
elCss: { // styles can be overwritten or added.
display: "block",
"text-align": "left",
"-moz-appearance": "none",
"-webkit-appearance": "none"
},
customContainerCss: { // styles can be overwritten or added.
position: 'relative'
},
customElCss: { // styles can be overwritten or added.
display: "block",
overflow: "hidden",
'white-space': "nowrap",
'text-overflow': "ellipsis"
},
element: obj, // input file field.
events: [], // custom events can be added.
validators: [] // custom validators can be added.
};
customformsjs.module.File(DEFAULTS);