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