How to change the color of first option in select using jQuery

Question

I am having the following Html

<select>
 <option value>--Select--</option>
 <option value="60">Salaried Employee</option>
 <option value="61">Trainee</option>
 <option value="62">Skilled Worker</option>    
</select>

Now here the my requirement is to display the first option in a blue color and the rest in black color. The first option should be blue in color either selected or not. I have the following jQuery as

$('select option:first-child').css('color', 'blue ');

The above code doesn't display the first option as blue when selected. Where am I wrong any help is welcome. Thanks for reading.

You'll probably have to add a .on('change', function(){}) that dynamically changes the select's color when that option is selected. — Taplar, May 05 '15 at 18:52
See fiddle here https://jsfiddle.net/11efs8Lx/. Note that your first option is "--Select--". Is the only issue that when selected the option is no longer blue? — steve klein, May 05 '15 at 18:54
@steveklein Thanks for your reply. Can you please tell me if --Select-- is selected then how to make it appear as blue. — user4867718, May 05 '15 at 19:02

Taplar · Accepted Answer · 2015-05-05T20:42:33.243

http://jsfiddle.net/9ggw1cds/

HTML

<select class="colorMeBlue noValue">
 <option value>--Select--</option>
 <option value="60">Salaried Employee</option>
 <option value="61">Trainee</option>
 <option value="62">Skilled Worker</option>    
</select>

CSS

select.colorMeBlue.noValue,
select.colorMeBlue option:first-child {
    color: blue;
}

select.colorMeBlue option:not(:first-child) {
    color: black;
}

JAVASCRIPT

$('select').on('change', function(){
    var $this = $(this);

    if (!$this.val()) {
        $this.addClass('noValue');
    } else {
        $this.removeClass('noValue');
    }
});

This logic makes at least two assumptions. 1) That you are able to add the two classes (or whatever you choose to make them) to the select elements and 2) the elements exist at the time that the binding executes.

If the content is being added dynamically to the page, then you will need a manner to know when the elements are created so you can add the classes and bind to the elements.

Alternatively, if you do not know when the elements will be added, but you do know they will be added to a container element, you can bind to that instead with a delegate. For instance...

<div class="selectContainer">
    <select class="colorMeBlue noValue">
        <option value>--Select--</option>
        <option value="60">Salaried Employee</option>
        <option value="61">Trainee</option>
        <option value="62">Skilled Worker</option>    
    </select>
</div>

In this case, if you knew that selectContainer was going to be on the page before you ran your binding and the inside select was going to be generated dynamically later on, you could instead bind with...

$('.selectContainer').on('change', 'select', function(){
    var $this = $(this);

    if (!$this.val()) {
        $this.addClass('noValue');
    } else {
        $this.removeClass('noValue');
    }
});

At that point, it would not matter when the selects were generated.

your code works fine. However it doesn't works when I am having multiple select . If you could help me let me know the same for multiple select's then I will mark your's as Accepted one . Anyway thanks for your help. — user4867718, May 05 '15 at 19:19
I make use of Bootstrap and hence when I try your code it doesn't works. But I can see the fiddle which meets my requirements and when I apply it in my project which uses Bootstrap it is something different. — user4867718, May 05 '15 at 20:01
Are you able to place the classes on your selects? If so and it is not working, then to me that would mean that the binding of the change event is happening before the elements exist. If you can execute the binding after you know the elements exist, it should work. Otherwise, if you know the elements are going to exist within a container element, you can bind on that using the delegate version, $(containerSelector).on('change', 'select', function(){ ... }); — Taplar, May 05 '15 at 20:36

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

Your jQuery is correct.

This works, too: $('select option:first').css('color', 'blue ');

Unfortunately, you're trying to style a browser-specific element.

Basically, Webkit browsers like Safari and Chrome will often leverage operating system elements to make this work, so code that styles a drop down in Chrome on Windows probably won't work in Chrome on OSX. Additionally, mobile operating systems like iOS or Android usually display a spinner of options for selects.

See How to style a select tag's option element? for more info.

Also: https://css-tricks.com/dropdown-default-styling/

If full control over the style of a dropdown is important, I recommend using a custom bootstrap solution like this one from silviomoreto. He has some color examples near the bottom.

(see Silvio's code on GitHub)

edited May 23 '17 at 12:28

Community

1
1

answered May 05 '15 at 19:36

Jon Weers

1,604
17
27

well thanks for your reply, I have seen your references since I am new to Bootstrap can you please suggest the same in the form of code.Thanks – user4867718 May 05 '15 at 19:47
The code to do this is pretty extensive, and often involves the use of a custom bootstrap extension to overwrite the select with styled
- s, that then update the select in the background. I'll update my answer with an example, but I wouldn't try to reinvent the wheel here.
– Jon Weers May 05 '15 at 20:25

How to change the color of first option in select using jQuery

2 Answers2