Clever Geek Handbook

Select the option text color displayed in the dropdown but not colored in the box, this option works i.e. 9 but doesn't work in chrome

https://jsfiddle.net/pbvijayk/7bLdg7cg/5/

option.red
{
  color: #cc0000;
}
      

        
        
        
      

    
<select name="color">
  <option class="red">Red</option>
  <option >White</option>
  <option >Blue</option>
  <option >Green</option>
</select>
Run codeHide result


run the code in ie9

and chrome

. the color of the text displayed in ie9

, the color of both the dropdown and the dropdown is displayed correctly. but in chrome color showing in dropdown but not showing in box.

+3


source to share


2 answers


Please try this: https://jsfiddle.net/7bLdg7cg/7/



.greenText{ color:green; }

.blueText{ color:blue; }

.redText{ 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>
Run codeHide result


+2


source


Try specifying a style to avoid choosing this option:



<select name="color">
  <option class="red">Red</option>
  <option>White</option>
  <option >Blue</option>
  <option >Green</option>
</select>
<style>
select .red
    {
       color: #cc0000;
    }
</style>
+1


source






More articles:


All Articles