Easy way styling select box using jQuery

Question

Is there any easy way to add a style to a select box in a form using jQuery?

<select>
  <option>sample</option>
  <option>sample1</option>
</select>

Thanks.

Can't style select boxes, try reading up on `progressive enhancement` .. — painotpi, Feb 14 '13 at 04:21
We can style `select` Read http://bavotasan.com/2011/style-select-box-using-only-css/ Another stackoverflow Question http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript — asifsid88, Feb 14 '13 at 04:26

score 7 · Answer 1 · answered Oct 02 '13 at 08:58

You can alternatively use jQuery.SimpleSelect, which is nothing less than a very simple and lightweight (1.75kb gzipped) plugin that will transform your <select> elements into a bunch of divs you'll be able to style however you want using CSS.

It's as simple as that:

HTML

<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

JavaScript

$("select").simpleselect();

And (with default styles that you can obviously customize), it gives you this:

enter image description here

Documentation

score 5 · Accepted Answer · answered Feb 14 '13 at 04:26

5

Check out Select2. It will style a select box and can also use Ajax to get data on the fly.

$(selector).select2();

answered Feb 14 '13 at 04:26

Steve

9,335
10
49
81

score 2 · Answer 3 · answered Apr 22 '13 at 11:08

Try easy styling select box using jquery

  <select class="selectboxdiv">

      <option>choose preset...</option>
      <option>two</option>
      <option>something</option>
      <option>4</option>
      <option>5</option>

  </select>

  <div class="out"></div>

http://fiddle.jshell.net/9Wt89/

Muhammad Talha Akbar · Answer 4 · 2013-02-14T04:39:34.490

0

You cannot style the <select> node but you can visually represent styled <ul> node that it is a dropdown menu. Just When the page loads hide the original dropdown menu and create one by forming a list by <ul> tag. And when the user click on <li> node then change also the value of <select> tag.

edited Feb 14 '13 at 04:39

answered Feb 14 '13 at 04:21

Muhammad Talha Akbar

9,952
6
38
62

score 0 · Answer 5 · answered Feb 14 '13 at 04:25

0

There is no easy way to style form elements in general to be consistent across browsers. But you could go for plugins like Uniform

answered Feb 14 '13 at 04:25

darshanags

2,519
1
13
19

score 0 · Answer 6 · answered Feb 14 '13 at 04:25

You cannot style the <select> tag. Trying wrapping them around with some HTML and you can style/script your HTMLs as you need.

You can do something like this (in jQuery), wrap your <select> with some markup,

<div class="selectBox">
    <ul>
        <li></li>
        <li></li>
    </ul>
    <select>
        <option></option>
        <option></option>
    </ul>
</div>

And then map <li> changes to <option> changes in your script.

Easy way styling select box using jQuery

6 Answers6

Linked