Custom Select, Checkbox, Radio Button And File Input - jQuery formElements
File Size: | 15.7 KB |
---|---|
Views Total: | 5193 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

formElements is a jQuery plugin for UI/UX design that provides an easy way to beautify the regular select, checkbox, radio button, text field and file input elements with custom styles.
How to use it:
1. Load the following JavaScript and CSS files into your document.
<link href="style.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="jquery-form-elements.js"></script>
2. Create a custom checkbox with an animated check marker.
<div class="form-element"> <label class="form-element-label" for="checkbox-name-1">Checkbox</label> <div class="form-element-error">Error Message Here</div> <label for="checkbox-name"> <input id="checkbox-name" class="custom-checkbox" type="checkbox"> <span class="text">Checkbox</span> </label> </div>
$('input[type=checkbox]').customCheckbox();
3. Create custom radio buttons with an animated check marker.
<div class="form-element"> <div class="form-element-label">Radio button</div> <label for="input_1"> <input id="input_1" class="custom-radio" type="radio" name="input_agent" value="" checked="checked" tabindex=""/> <span class="text">Radio 1</span> </label> <label for="input_2"> <input id="input_2" class="custom-radio" type="radio" name="input_agent" value="" tabindex=""/> <span class="text">Radio 2</span> </label> </div>
$('input[type=radio]').customRadio();
4. Create custom dropdown select.
<div class="form-element"> <div class="form-element-label" for="select">Select</div> <div class="form-element-error">Error Message Here</div> <select id="select" class="" name="" tabindex=""> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> ... </select> </div>
$('select').dropdown({ maxItems: 3 // max items to display });
5. Create custom file input.
<div class="form-element"> <label class="form-element-label" for="input-file">Upload files</label> <div class="form-element-error">Error Message Here</div> <input type="file" id="input-file" name="" data-label="Select files" data-multiple-caption="{n} files selected" multiple /> </div>
$('input[type=file]').inputfile();
This awesome jQuery plugin is developed by antoineguillou. For more Advanced Usages, please check the demo page or visit the official website.