Is it possible to style a select box

Question

I ve got an HTML select box that I need to style  I d prefer to use just CSS but if I have to I ll use jQuery to fill in the gaps   Can anyone recommend a good tutorial or plugin   I know  Google  but I ve been searching for the last two hours and I m not finding anything that meets my needs   It needs to be    Compatible with jQuery 1 3 2 Accessible Unobtrusive Completely customizable in terms of styling every aspect of a select box   Does anyone know anything that will meet my needs

User · Accepted Answer

I ve seen some jQuery plugins out there that convert  lt select gt  s to  lt ol gt  s and  lt option gt  s to  lt li gt  s  so that you can style it with CSS  Couldn t be too hard to roll your own   Here s one  https   gist github com 1139558  Used to he here  but it looks like the site is down    Use it like this       myselectbox   selectbox      Style it like this   div selectbox-wrapper ul     list-style-type none    margin 0px    padding 0px    div selectbox-wrapper ul li selected      background-color   EAF2FB    div selectbox-wrapper ul li current      background-color   CDD8E4    div selectbox-wrapper ul li     list-style-type none    display block    margin 0    padding 2px    cursor pointer

User · Answer

Simple solution is Warp your select box inside a div  and style the div matching your design  Set opacity 0 to select box  it will make the select box invisible  Insert a span tag with jQuery and change its value dynamically if user change drop down value  Total demonstration shown in this tutorial with code explanation  Hope it will solve your problem       JQuery Code looks like similar to this     lt script gt       document  ready function             dropdown menu   each function           var baseData     this  find  select option selected   html             this  prepend   lt span gt     baseData     lt  span gt                        dropdown menu select   change function e          var nodeOne     this  val           var currentNode     this  find  option value     nodeOne        text             this  parents   dropdown menu   find  span   text currentNode                    lt  script gt

User · Answer

Updated for 2014  You don t need jQuery for this  You can fully style a select box without jQuery using StyleSelect  Eg  given the following select box    lt select class  demo  gt     lt option value  value1  gt Label 1 lt  option gt     lt option value  value2  selected gt Label 2 lt  option gt     lt option value  value3  gt Label 3 lt  option gt   lt  select gt    Running styleSelect  select demo   would create a styled select box as follows

User · Answer

I just found this which seems really good   http   www dfc-e com metiers multimedia opensource jqtransform

User · Answer

As for CSS  Mozilla seems to be the most friendly  especially from FF 3 5    Webkit browsers mostly just do their own thing  and ignore any style   IE is very limited  though IE8 lets you at least style border color width   The following actually looks fairly nice in FF 3 5   picking your color preference  of course    select       -moz-border-radius  4px      -moz-box-shadow  1px 1px 5px  cfcfcf inset      border  1px solid  cfcfcf      vertical-align  middle      background-color  transparent    option       background-color   fef5e6      border-bottom  1px solid  ebdac0      border-right  1px solid  d6bb86      border-left  1px solid  d6bb86    option hover       cursor  pointer      But when it comes to IE  you have to disable the background color on the option if you don t want it to display when the option menu isn t pulled down   And  as I said  webkit does its own thing

User · Answer

This seems old but here a very interesting plugin - http   uniformjs com

User · Answer

Update  As of 2013 the two I ve seen that are worth checking are    Chosen - loads of cool stuff  7k  watchers on github   mentioned by  a paid nerd  in the comments  Select2 - inspired by Chosen  part of Angular-UI with a couple useful tweaks on Chosen    Yeah     As of 2012 one of the most lightweight  flexible solutions I ve found is ddSlick  Relevant  edited  info from the site    Adds images and text to select options Can use JSON to populate options Supports callback functions on selection   And here s a preview of the various modes

User · Answer

We ve found a simple and decent way to do this  It s cross-browser degradable  and doesn t break a form post  First set the select box s opacity to 0    select        opacity   0      width  200px      height  15px      lt select class  select  gt       lt option value  foo  gt bar lt  option gt       lt  select gt    this is so you can still click on it  Then make div with the same dimensions as the select box  The div should lay under the select box as the background  Use   position  absolute   and z-index to achieve this    div       width  200px      height  15px      position  absolute      z-index  0      lt div class   div  gt  the text of the the current selection updated by javascript  lt  div gt   lt select class  select  gt       lt option value  foo  gt bar lt  option gt       lt  select gt    Update the div s innerHTML with javascript   Easypeasy with jQuery       select   click function event              div   html     select option selected   val         That s it  Just style your div instead of the select box  I haven t tested the above code so you ll probably need tweak it  But hopefully you get the gist    I think this solution beats  -webkit-appearance  none    What browsers should do at the very most is dictate interaction with form elements  but definitely not how their initially displayed on the page as that breaks site design

User · Answer

If have a solution without jQuery  A link where you can see a working example  http   www letmaier com  selectbox select general code html  styled with more css   The style-section of my solution    lt style gt   container   margin  10px  padding  5px  background   E7E7E7  width  300px  background   ededed      ul1   display  none  list-style-type  none  list-style-position  outside  margin  0px  padding  0px     container a    color   333333  text-decoration  none     container ul li    padding  3px    padding-left  0px   border-bottom  1px solid  aaa   font-size  0 8em  cursor  pointer     container ul li hover   background   f5f4f4     lt  style gt    Now the HTML-code inside the body-tag    lt form gt   lt div id  container  onMouseOver  document getElementById  ul1   style display    block    onMouseOut  document getElementById  ul1   style display    none    gt  Select one entry   lt input name  entrytext  type  text  disabled readonly gt   lt ul id  ul1  gt       lt li onClick  document forms 0  elements  entrytext   value  Entry 1   document getElementById  ul1   style display    none    gt  lt a href     gt Entry 1 lt  a gt  lt  li gt       lt li onClick  document forms 0  elements  entrytext   value  Entry 2   document getElementById  ul1   style display    none    gt  lt a href     gt Entry 2 lt  a gt  lt  li gt       lt li onClick  document forms 0  elements  entrytext   value  Entry 3   document getElementById  ul1   style display    none    gt  lt a href     gt Entry 3 lt  a gt  lt  li gt   lt  ul gt   lt  div gt   lt  form gt

User · Answer

Here s a little plug if you mostly want to   go crazy customizing the closed state of a select element but at open state  you favor a better native experience to picking options  scroll wheel  arrow keys  tab focus  ajax modifications to options  proper zindex  etc  dislike the messy ul  li generated markups   Then jquery yaselect js could be a better fit  Simply      select   yaselect      And the final markup is    lt div class  yaselect-wrap  gt     lt div class  yaselect-current  gt  lt  -- current selection -- gt  lt  div gt   lt  div gt   lt select class  yaselect-select  size  5  gt     lt  -- your option tags -- gt   lt  select gt    Check it out on github com

User · Answer

You can style to some degree with CSS by itself  select       background  red      border  2px solid pink      But this is entirely up to the browser  Some browsers are stubborn   However  this will only get you so far  and it doesn t always look very good  For complete control  you ll need to replace a select via jQuery with a widget of your own that emulates the functionality of a select box  Ensure that when JS is disabled  a normal select box is in its place  This allows more users to use your form  and it helps with accessibility

User · Answer

You should try using some jQuery plugin like ikSelect   I tried to make it very customizable but easy to use   http   github com Igor10k ikSelect

User · Answer

Most of the browsers doesn t support customizing of select tag using css  But I find this javascript which can be used to style select tag  But as usual no support for IE browsers   http   ryanfait com resources custom-checkboxes-and-radio-buttons  I noticed an error on this that Onchange attribute dosen t work

User · Answer

I created the jQuery plugin  SelectBoxIt  a couple of days ago   It tries to mimic the behavior of a regular HTML select box  but also allows you to style and animate the select box using jQueryUI   Take a look and let me know what you think   http   www selectboxit com

User · Answer

this on uses the twitter-bootstrap styles to turn selectin dropdown menu https   github com silviomoreto bootstrap-select

[jquery] Is it possible to style a select box?

Examples related to jquery

Examples related to css

Examples related to html-select