Coloured options in a select element using jQuery

Styling form elements can be treacherous territory, as while css should allow this kind of functionality, form handling is increasingly within the remit of the browser (especially across mobile and tablet platforms). However, there are times when plain coloured drop-down lists are not desirable – for example on a status dashboard with many such elements – and this is one method that can be used to change this which appears to fail gracefully.

Let’s say we want to create a select box like the following:

Firstly we define the element:

<select id="select_example">
    <option value="0">---------</option>
    <option value="1">Online</option>
    <option value="2">Offline</option>
    <option value="3">Unknown</option>

Next we set the background colour of each option, which are children of the select element:

<script type="text/javascript">
$('select[id=select_example]').children().each(function (){    
    colors = ['white', 'green', 'red', 'orange']
    $(this).attr('style', 'background-color:' + colors[$(this).val()] + ';');

However, the background colour of the select element over-rides the background colour of the selected option element, so each time the selected option changes, we should set the select element’s background colour to that of the selected option element:

$('select[id=select_example]').change(function (){
    $(this).attr('style', $(this).find('option:selected').attr('style'));

I haven’t tested this across many browsers, but seems to work on the main desktop clients.


  1. Jagtar Singh says:

    Hi Graeme,

    This is a great post and very helpful. However, I am having a little problem – I have realised when you change the values like this:


    The function stops working – how could I get it to work again while keeping the values, the way I want.

    Thanks a lot for this cool post.

    Kind Regards,

    • Jagtar Singh says:

      Rather than 0, 1, 2, 3 – I want to use alphabets for values but that makes it stop working. Cheers.

  2. Yuriy says:

    Thanks for help

  3. It’s not good for website!

  4. paramesh says:

    thanq thanq very much bro

  5. It is impressive coding. Printing is also very easy for this coding. Thanks for sharing such a wonderful information.

  6. Rolet online says:

    Looking forward to reading more. Great article.Really thank you! Really Cool.

  7. whoah this blog is wonderful i love reading your articles. Keep up the good work! You know, many people are hunting around for this information, you can aid them greatly.

  8. Slotxo says:

    Live as if you were to die tomorrow. Learn as if you were to live forever.

  9. Perfectly composed articles , regards for selective information.

  10. Wow, what a video it is! Genuinely good feature video, the lesson given in this video is truly informative.

Leave a Reply to sun lamp for plant Cancel reply

Your email address will not be published. Required fields are marked *


question razz sad evil exclaim smile redface biggrin surprised eek confused cool lol mad twisted rolleyes wink idea arrow neutral cry mrgreen

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>