Beantown Design Beantown Design
  • WordPress Tips
  • Coding
  • Design
  • WordPress Tips
  • Coding
  • Design

10 Solutions to style Form Selects with jQuery and CSS

November 20, 2015

If you code much with jQuery and CSS then you know what a pain trying to style form selects are. It’s a pain because, it’s not really possible with pure CSS. The browsers generate the select drop-down and for some reason we still can’t target them. Luckily there are some great jQuery and CSS plugin solutions to style your form selects. Here are 10 great options (in no special order) to style your form selects.

1. Simple Drop Down Effects

Lets start with a great post from codrops. In their words “The idea is to transform a normal select input into something more appealing with a jQuery plugin. The expanding of the options will happen with a transition and parameters can be configured in a way to achieve unique effects.” And we couldn’t agree more, the results are super impressive. 6 awesome demos with different transitions are shown and to our surprise those actually work (good enough) in IE9 which gives this plugin complete approval to use in our opinion.

codrops-form-styling-demo

2. Custom Drop Down List Styling

An oldie but goodie, this is the original post and code that inspired the #1 on this list from codrops. More awesome styles with free download.

codrops dropdown demo

3. Select Inspiration

One final collection of amazing select element solutions from codrops.

codrops form

4. jQuery Selectric

Selectric is one of the easiest plugins to hook up to your existing form selects. Multiple themes are available and the website has an easy to use theme creator so you can make custom CSS to match your selects to your website colors.

jQuery Selectric

5. Bootstrap Select

A custom select for @twitter Bootstrap using button dropdown.

bootstrap select

6. ddSlick

This jQuery plugin allows you to create a custom drop down that can include images, a short description, along with your usual text and value.

ddslick

7. jQuery Selectbox

Custom select box replacement inspired by jQuery UI source

jQuery-Selectbox-plugin

8. Chosen

Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.

jquery chosen

9. MagicSuggest

Multiple selection combobox built for bootstrap themes.

magicsuggest

10. SelectBoxIt

SelectBoxIt allows you to replace ugly and hard to use HTML select boxes with gorgeous and feature rich drop downs.

SelectBoxIt

Posted in: Coding Tagged: Bootstrap, CSS, jQuery Author: Beantown Design

Tagged: Bootstrap • CSS • jQuery

1 Comment

  1. בלוג ממליצים
    October 27, 2016 at 4:40 am / Reply

    and where i can find a tutorial to this magnific thing =)?

Leave a Reply / Cancel Reply

Related Posts

  • Back to Blog
  • Prev
  • Next

Beantown Design | Custom Websites
292 Newbury Street #204 Boston, MA

© 2018 Beantown Design