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

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.

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.

  • Publication date: 21.05.2018
  • Source