Custom Select, Checkbox, Radio Button And File Input - jQuery formElements

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

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="" 
<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>

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 for="input_2">
    <input id="input_2" class="custom-radio" type="radio" name="input_agent" value="" tabindex=""/>
    <span class="text">Radio 2</span>

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>
  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 />

This awesome jQuery plugin is developed by antoineguillou. For more Advanced Usages, please check the demo page or visit the official website.