Animated Material Dropdown Select Plugin With jQuery - AwesomeSelect

AwesomeSelect is a jQuery plugin which replaces the regular select element with a pretty cool, Material Design inspired dropdown list as you seen here. Awesome animations based on CSS3 transition and transform properties.

How to use it:

1. To use this plugin, you first have to include jQuery library and the jQuery AwesomeSelect plugin's JavaScript and CSS files in the html document.

<link href="css/awselect.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/awselect.js"></script>

2. Call the function awselect() on the target select element and you're done.

$('select').awselect()

3. Customize the Material dropdown list with the following options.

$('select').awselect({

  // background color
  background: "#e5e5e5",

  // background color when active
  active_background: "#fff",

  // color of placeholder
  placeholder_color: "#000",

  // color of placeholder when active
  placeholder_active_color: "#000",

  // color or options
  option_color: "#000",

  // padding in pixles
  vertical_padding: "15px",
  horizontal_padding: "40px",

  // enable / disable Immersive mode
  immersive: false,
  
}) 

---

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