Skip to content

zachwinter/selects.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 

Repository files navigation

selects.js

Cross-Browser <select> Styling

Replace default browser behavior for <select> elements with a modern, stylable animated dropdown interface.

Features:

  • Full keyboard controls
  • Ability to replace default mobile <select> behavior
  • CSS3 animations (jQuery fallback)
  • Customizable proxy markup
  • Honeypot option for proper tab indexing

Browser Support:

  • Internet Explorer 8 - 11
  • Internet Explorer Mobile
  • Chrome
  • Firefox
  • Safari
  • Mobile Safari
  • Windows Phone
  • Android Browser

Setup

Plugin accepts <form> elements, single or multiple. Plugin parameters (and defaults) are as follows:

overrideMobileBehavior : false, // "True" will replace mobile <select> behavior.
useCssTransitions      : true,  // "False" will use jQuery animation for dropdowns.
slideSpeed             : 300,   // Speed of dropdown animations.
dropdownHeight         : 150,   // Max-height of dropdowns (px).
proxy : {
 select   : $('[data-form-element="select"]'),
 dropdown : $('[data-form-element="select-dropdown"]'),
 button   : $('[data-form-element="select-button"]'),
 honeyPot : $('.hp')
}

<select> elements you wish to style must be wrapped in a proxy element. As demonstrated above, you can choose to use any proxy you'd like.

<div data-form-element="select">
  <select>
    <option value="01">Option 01</option>
    <option value="02">Option 02</option>
    <option value="03">Option 03</option>
  </select>
</div>

Advanced Styling

You can add <span> tags around text for more intricate styling.

<option data-span="Smith">Granny Smith Apples</option>

Above will result in:

<li><a href="#">Granny <span>Smith</span> Apples</a></li>

You can also add <img> tags to your <option> proxy elements.

<option data-img="http://www.website.com/image.jpg">Granny Smith Apples</option>

Above will result in:

<li><a href="#"><img src="http://www.website.com/image.jpg" alt="" />Granny Smith Apples</a></li>

Changelog

v1.3

  • You no longer need to use a namespace for events (on/trigger change).
  • You can now add <span> tags around text for more intricate styling.
  • You can now add an <img> element to <option> proxy elements.
  • Fixed issue with using custom proxy elements.

v1.2

  • Support for disabled <select> elements.

v1.1

  • Added data-attribute to <select> elements that contains the element's event namespacing. For convenience, the first character is always a period.
var namespace = $('select').attr('data-namespace');

$('select').on('change' + namespace, function () {
	// Yay!
});

About

Cross-browser <select> styling.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published