-2

How can I change the 2nd child of the option select with id "order" to green? The code I have below applies to all option select which is not preferable based on what I need. Is this doable?

<style>
    select option:nth-of-type(2){
    color: green;
  }
</style>

<select id="order"/>
  <option value="">1</option>
  <option value="">2</option>
  <option value="">3</option>
</select>
<select id="type"/>
  <option value="">A</option>
  <option value="">B</option>
  <option value="">C</option>
</select>
ninjachuku
  • 43
  • 2
  • 8
  • 1
    Possible duplicate of [How do change the color of the select box's option text?](https://stackoverflow.com/questions/8635317/how-do-change-the-color-of-the-select-boxs-option-text) – priya_singh Jul 21 '17 at 06:25
  • Possible duplicate of [How to change select box option background color?](https://stackoverflow.com/questions/12836227/how-to-change-select-box-option-background-color) – Karthik Tsaliki Jul 21 '17 at 06:26
  • solve this problem using hover – A.A Noman Jul 21 '17 at 06:27
  • Not duplicate. My question pertained to a specific div whereas other questions apply to all div. – ninjachuku Jul 21 '17 at 06:32
  • It doesn't interfere you to specify some child you want... Anyway, it requires to represent your options as divs, because options are always shown according to browser style. – Sergey Jul 21 '17 at 06:34

2 Answers2

0

You can either do this and assign your CSS classes manually

option.colored {
 color: red;
}
<select>
<option>Option 1</option>
<option class="colored">Option 2</option>
<option>Option 3</option>
</select>

Or you can do this, have every :nth item colored in a specific list

.coloredOption option:nth-child(2n+2) {
  color: red;
}
<select class="coloredOption">
     <option>Option 1</option>
     <option>Option 2</option>
     <option>Option 3</option>
     <option>Option 4</option>
     <option>Option 5</option>
     <option>Option 6</option> 
</select>
Xariez
  • 759
  • 7
  • 24
  • I though I did this on first try but it didn't work. I just realize that I didn't do ctrl F5 to refresh the cache. – ninjachuku Jul 21 '17 at 06:46
-1

If you want to customize any types of check boxes(including select/options). We usually create divs that are look like we want and we tie this divs with our select/checkboxes with help of JavaScript

Sergey
  • 7,184
  • 13
  • 42
  • 85