How Do Change the Color of the Text of an <Option> Within a <Select>

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>

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>

Change option colour in select menu

Try adding color using css for the first child of select list as below

<style>    
select option:first-child {
        color : #F60F60;
    }
</style>

hope it helps

How can I change the color of the select Tag dependent on the option chosen (using pure JavaScript)?

You can do something like this:

var select = document.getElementById('primaryColor')
select.onchange = () => {

  // Initial color
  let color = 'white'

  // Check background color and change font color accordingly
  if (select.value == '#fff') color = 'black'

  select.style.cssText = `
        background-color: ${select.value};
        color: ${color};
        border: 3px solid #333;
      `
}

/* <select> styles */

select {
  /* Reset */
  appearance: none;
  border: 0;
  outline: 0;
  font: sans-serif;
  /* Personalize */
  width: 100%;
  max-width: 100%;
  position: relative;
  color: #fff;
  background-color: #aaaaaa;
  font-size: 16px;
  text-align: center;
  height: 50px;
  line-height: 30px;
  display: block;
  cursor: pointer;
  border: 3px solid transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

select option {
  color: white;
  background-color: gray;
}

select:focus {
  outline: none;
}

option:checked {
  background-color: #1abc9c;
}

select::-ms-expand {
  display: none;
}

<select class="parent" id="primaryColor">
  <option class="child" selected disabled hidden>
    Choose a color
  </option>
  <!-- Set value as the hex color -->
  <option class="child" value="#fff">White</option>
  <option class="child" value="#000">Black</option>
  <option class="child" value="#f00">Red</option>
  <option class="child" value="#0f0">Green</option>
  <option class="child" value="#00f">Blue</option>
  <option class="child" value="#204">Purple</option>
</select>

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
}