How to Change the Text Color of First Select Option

How do change the color of the text of an option within a select ?

Suresh, you don't need use anything in your codes.
What you need is just something like this:

.others {    color:black}

<select id="select">    <option style="color:gray" value="null">select one option</option>    <option value="1" class="others">one</option>    <option value="2" class="others">two</option></select>

How to change the text color of first select option

What about this:

select{
  width: 150px;
  height: 30px;
  padding: 5px;
  color: green;
}
select option { color: black; }
select option:first-child{
  color: green;
}

<select>
  <option>one</option>
  <option>two</option>
</select>

How to change color of the select list's first option

By what I've understood of your comment, I think that is what you want

HTML

 <select class="btn btn-md" id="step3-drpdwn" onchange="setColor(this);">
        <option disabled selected>
            Your Designation or Role in the Company
        </option>
        <option>
            Chairman
        </option>
        <option>
            President
        </option>
        <option>
            CEO
        </option>
        <option>
            Director
        </option>
        <option>
            Proprietor
        </option>
    </select>

and JS

function setColor(dropdown){
    dropdown.style.color = "black";
};

or if you are using JQuery

$(document).ready(function(){
    $("#step3-drpdwn").on("change", function(){
        $(this).css("color", "#000");
    });
});

Here's Fiddle https://fiddle.jshell.net/qyLgorm8/1/ (uncomment the HTML/JS to see working with pure JS)

Hope it helps

css change text color of all select options

HTML:

<select id="country">
    <option>Country</option>
    <!--many more-->
</select>

CSS:

select#country {
    color: blue; //or whatever color you want
}

Change Text Color of Selected Option in a Select Box

Try this:

.greenText{ background-color:green; }
.blueText{ background-color:blue; }
.redText{ background-color:red; }

<select    onchange="this.className=this.options[this.selectedIndex].className"    class="greenText">     <option class="greenText" value="apple" >Apple</option>    <option class="redText"   value="banana" >Banana</option>    <option class="blueText" value="grape" >Grape</option></select>

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

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.

Set font color for select option placeholder

To directly address the option font color, we can set the color on the select element to the light grey, then set all the option font colors except the first to black.

This way, the first option inherits the light grey, and shows as such while the select is both open and closed.

select {  color: #9e9e9e;}option:not(:first-of-type) {  color: black;}

<select id="searchresults4" name="primarysport">  <option value="">Choose Primary Sport...</option>  <option>Football</option>  <option>Basketball</option>  <option>Baseball</option>  <option>Softball</option>  <option>Soccer</option>  <option>Golf</option></select>