Add support for styling select fields.
A custom element is added behind the browser default select field,
and the select field is made transparent to create the illusion of a
custom element. Options can be passed to extend the defaults.
- Source:
- lib/select/Select.js, line 49
Example
var DEFAULTS = {
active: true, // active by default
ready: function() {}, // callback when module is ready.
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.
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",
'-webkit-appearance': 'none',
'-moz-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, // select input field.
events: [], // custom events can be added.
validators: [] // custom validators can be added.
};
customformsjs.module.Select(DEFAULTS);