Responsive

Responsive design.

Compatible with iPhones, iPads, Android, Windows Mobile, Chrome, Safari, FireFox, Internet Explorer, Lynx, Maxthon, SeaMonkey, Opera Mobile, Chrome for Android, Netscape, Konqueror, Kindle, RockMelt, and literally every living browser today.

Responsive

Light load.

No libraries, no external stylesheets to manage, no version control to hassle. Downloads to users generally weigh under 1kb.

Try it out on your phone or your desktop browser. See something missing? Contact us.

Responsive

Accessiblity.

Built-in support for screenreaders and other accessibility devices. No more fussing with 508 compliance, ARIA roles, and complex interaction testing; select handles accessibility concerns by making text values available for machine consumption.

Responsive

Native Experience.

Select automatically customizes itself based on the host operating system and browser; users get the look and feel they're used to without any complicated work for you.

Responsive

HTML 5 and CSS 3.

Use the latest web technologies to develop your web forms, giving a semantic presence and levraging the latest and most up-to-date knowledge to build a rich user experience.

Examples

Read the official documentation for an in-depth look.

Simple Select

Shared text and values. Select 'name' is sent to the server in a GET or POST request.


<select name='answer'>
  <option>Yes/<option>
  <option>No/<option>
</select>

Select with Custom Display Text

The 'value' is sent in the form response to the server.


<select name='answer'>
  <option value="yes">Yes, I'd love to!/<option>
  <option value="no">No, thanks./<option>
</select>

Select with Custom Javascript Events using jQuery

Try changing the values.


<select id="test" name='answer'>
  <option value="yes">Yes, I'd love to!/<option>
  <option value="no">No, thanks./<option>
</select>

<script>
$(function(){
  $("#test").change(function(e){
    var $this = $(this),
        val = $this.val(),
        text = $this.find(":selected").text();

    alert("You selected option " + text + " with value " + val);
  });
});
</script>