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:

// give a width to the div and hide the overflow
.mainSelector {
  display:block;
  background: url(select_button.gif);  
  width:180px;
  height:20px;
  overflow:hidden;
  padding:10px;
}

// select field
select.selector {
  display:block;
  width:240px;
  height:40px;
  /** override the default setting **/
  border:none;
  background:transparent;
  -webkit-appearance: none; /** for webkit / chrome example... **/
  outline:none; 
  color:#fff;
}

Below is the output that i have:

 

  • dudk

    Styling select fields | Max Li bin Very nice post. I just stumbled upon your blog and wished to say that I’ve truly enjoyed surfing around your blog posts. In any case I’ll be subscribing to your feed and I hope you write again very soon!

  • Graveyard Ball v1.0

    This is the punish Styling select fields | Max Li bin journal for anyone who wants to move out out most this issue. You observation so overmuch its nigh exhausting to debate with you (not that I real would want…HaHa). You definitely put a new prolong on a issue thats been graphical around for age. Nice sundry, simply major!

  • Styling select fields | Max Li bin I was recommended this website by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my problem. You’re wonderful! Thanks! your article about Styling select fields | Max Li binBest Regards Shane

  • This is the correct Styling select fields | diary for anyone who wants to essay out out almost this message. You note so untold its nearly tiring to discourse with you (not that I rattling would want…HaHa). You definitely put a new prolong on a issue thats been backhand nigh for life. Good object, only zealous!

  • I simply want to mention I am very new to blogging and site-building and actually savored you’re web blog. Almost certainly I’m going to bookmark your website . You amazingly come with good stories. Regards for sharing with us your website page.