Styling select fields

Styling select field is a huge pain, the select field are so limited that we have to look for javascript solutions.

Here are some good jQuery Plugins that you download.


[button link=”http://www.adamcoulombe.info/lab/jquery/select-box/” size=”small” target=”blank”]Download[/button]


[button link=”http://www.abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/” size=”small” target=”blank”]Download[/button]


[button link=”http://cssglobe.com/post/8802/custom-styling-of-the-select-elements” size=”small” target=”blank”]Download[/button]


[button link=”http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/” size=”small” target=”blank”]Download[/button]


[button link=”http://info.wsisiz.edu.pl/~suszynsk/jQuery/demos/jquery-selectbox/” size=”small” target=”blank”]Download[/button]


[button link=”http://www.georgepaterson.com/sandbox/jquery-ui-custom-select-demo/” size=”small” target=”self”]Download[/button]

[divider] [/divider]

However if you don’t like any of them, you can look out for a quick Css Solution:

Create your select field and wrap with a element, here i use Div to wrap it.
Here is the button image i use if you want to download:

HTML:
[cc lang=”html”]

Css:

Below is the output that i have: