A plugin to generate accessible custom forms: select, radio, checkbox.
Demo: https://vebersol.net/demos/jquery-custom-forms/
<!-- Add jQuery and the plugin file in your HTML page -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="custom.forms.jquery.js"></script>
<!-- Add the class "cform" to all elements that you want to use as custom form -->
<select name="data[select]" class="cform">
<option value=""></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<input type="radio" name="data[radio]" value="option1" id="option1" class="cform">
<input type="checkbox" name="data[check]" value="female" id="optiona" class="cform">
<!-- Setup the plugin and enjoy yourself! -->
<script type="text/javascript">
$(function() {
$('form').customForm();
});
</script>
Use this method to build the custom forms.
Options should be an object like:
var options = {
prefix: 'my-own-prefix',
keyClass: 'my-own-key-class',
enableWrapper: false
};
$.customForm(options);
-
prefix: (String)
A prefix to add to all class names used on elements created by this plugin.
Default value: 'custom-form-' -
keyClass: (String)
The class used to allow element to be replaced by a custom form element.
Default value: 'cform' -
enableWrapper: (String)
A boolean to enable a wrapper around the custom element and the original element. Very usefull to change position of the element.
Default value: false
MIT License - https://www.opensource.org/licenses/MIT