Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here are a few options I know of (in no particular order):</p> <h3>StyleSelect</h3> <p><a href="http://wellstyled.com/en/javascript-styleselect-jquery-plugin/">Website</a></p> <p>Wraps the existing <code>&lt;select&gt;</code> tag, so all the events, properties and so on should remain accessible. The default styling isn't that nice though, and there are limits to how much it can be customised.</p> <h3>Chosen</h3> <p><a href="http://harvesthq.github.com/chosen/">Website</a> - <a href="https://github.com/harvesthq/chosen">Github</a></p> <p>Nice default styling, but the generated markup is kind of weird and it doesn't support the whole range of callbacks you might need (only <code>change</code>)</p> <h3>jQuery UI Selectbox</h3> <p><a href="http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/">Website</a> - <a href="https://github.com/fnagel/jquery-ui">Github</a></p> <p>A good option if you are already using jQuery UI - otherwise potentially too much overhead. It doesn't use the <code>&lt;select&gt;</code>'s events, but has equivalent callbacks (and even ones not present on a regular submit, like <code>open</code>/<code>close</code>). Also it's <a href="http://www.w3.org/TR/wai-aria/states_and_properties">ARIA</a> compliant.</p> <h3>jStyling</h3> <p><a href="http://inspirativ.com/jstyling/">Website</a> - <a href="https://github.com/polsad/jStyling">Github</a></p> <p>Again, wraps the original <code>&lt;select&gt;</code> tag. Supports <code>disabled</code> options. Default styling is fairly uninspiring and it's designed to cover more than just select boxes (potentially unwanted cruft).</p> <h3>Uniform</h3> <p><a href="http://uniformjs.com/">Website</a> - <a href="https://github.com/pixelmatrix/uniform">Github</a></p> <p>Simple to implement, supports multiple themes. Lack of callbacks though, sometimes have to force <code>update</code> elements (mentioned already), covers more than just select boxes (again, potentially unwanted cruft).</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload