CODEWITHSUNDEEP
jquerycssselect
jhunlio
jhunlio

Reputation: 2660

Easy way styling select box using jQuery

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.

Upvotes: 1

Views: 32949

Answers (6)

user1728278
user1728278

Reputation: 625

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

Upvotes: 7

Sandip
Sandip

Reputation: 21

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/

Upvotes: 2

Talha Akbar
Talha Akbar

Reputation: 10030

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.

Upvotes: 0

Steve
Steve

Reputation: 9561

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

$(selector).select2();

Upvotes: 5

painotpi
painotpi

Reputation: 6996

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.

Upvotes: 0

darshanags
darshanags

Reputation: 2519

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

Upvotes: 0

Related Questions