2

I want to have a select in which every options are displayed with their style. I search on the web and I found this :

Change Text Color of Selected Option in a Select Box

I made a snippet with 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>

What I have here is good, but I want to display the colors of the options in the selection menu too (when we click on the select button, I want to have all the options displayed with their own color)

I want too see the colors too here :

Select menu

Is it possible to doing this in HTML/CSS ? And perhaps with use of javascript/jquery ?

Community
  • 1
  • 1
testa abalez
  • 1,042
  • 3
  • 13
  • 28
  • What browser are you using? It works in Chrome, the options have colors in the dropdown ánd after the select. – Randy May 17 '16 at 09:26
  • so whats the problem again ? – Amin Gharavi May 17 '16 at 09:27
  • Yes it works for me too in Chrome. But I want more than that, I want these colors to appear even when I click on the selection button too choose the option of my choice. – testa abalez May 17 '16 at 09:27
  • I don't know what your expectations are, but it seems to me: that what you are asking is exactly what is happening for me in chrome. The dropdown list hás the colors, before you choose, and the select has them too with your choice. Please tell us exactly what browser and version you are using. – Randy May 17 '16 at 09:29
  • When you change your option, the select color changes, yes it's true. But when you are in the menu for choosing an option (when I can click on Apple, Banana or Grape), all the options are not colored and what I want is too see the colors even in this case. – testa abalez May 17 '16 at 09:31
  • I use Chrome. I have edited my question with an image – testa abalez May 17 '16 at 09:35
  • 1
    You're probably having a conflict with something. [this is how i see it](http://s32.postimg.org/iflh0aqa9/cap.png). – Amin Gharavi May 17 '16 at 09:45
  • @AminGharavi +1 me too – Randy May 17 '16 at 09:46
  • 1
    @testaabalez Are you using the mobile version of Chrome? Are you using Apple devices? What's your Chrome version? What themes/plugins are you using in Chrome? – Randy May 17 '16 at 09:48
  • Yes, I am using Chrome on Mac. I just tried with Chrome for Windows, and yes, I see this selection menu in the correct way I want ! Is it possible to resolve this on Chrome for Mac ? Thank you ! – testa abalez May 17 '16 at 09:50
  • @testaabalez, its' a known behavior for webkit-based browsers on Mac. Probably a bug. – Chris May 17 '16 at 09:54
  • Ok, I see, so I can change this, I suppose. Thank you ! – testa abalez May 17 '16 at 10:01

0 Answers0