Win a copy of Reactive Streams in Java: Concurrency with RxJava, Reactor, and Akka Streams this week in the Reactive Progamming forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Junilu Lacar
  • Jeanne Boyarsky
  • Bear Bibeault
Sheriffs:
  • Knute Snortum
  • Tim Cooke
  • Devaka Cooray
Saloon Keepers:
  • Ron McLeod
  • Stephan van Hulst
  • Tim Moores
  • Tim Holloway
  • Carey Brown
Bartenders:
  • Piet Souris
  • Frits Walraven
  • Ganesh Patekar

How to populate different colors with different values inside a single dropdown field in html form ?

 
Ranch Hand
Posts: 220
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
My requirement is quite different. what i want, in an html page, i want a drop down field with some values in it. Static or dynamic values does not matter here. I want different colors with different values inside that single drop down field. For e.g. - suppose there is a field City with some values like Delhi, Mumbai, Bangalore, Chennai,etc. These must be populated inside City field with different colors. Is that possible ? Lets make it little bit simpler, instead of different values with different colors, i just want different colors in it like if you see "Font Color" field which you see in word, excel.
Any idea, any piece of code would definetly be helpful.

thanks
 
Ranch Hand
Posts: 58
Eclipse IDE Firefox Browser Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Use background-color CSS on the option in the select box.
 
Marshal
Posts: 67289
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

K West wrote:Use background-color CSS on the option in the select box.


That will not work. CSS is not applied to options.

You'll need to create a custom control to achieve this -- you will not be able to do this with the HTML <select> control.

Perhaps there's a jQuery plugin that will do what you want. Are you looking for a color picker?
 
K West
Ranch Hand
Posts: 58
Eclipse IDE Firefox Browser Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am not disputing on this and maybe the solution given by you is the most appropriate one.

I tried this example out of curiosity. And the background of option is colored. How does it work?
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Works fine for me if you want to changes the whole background of the select options: http://jsbin.com/udefi3/3/

Eric
 
Bear Bibeault
Marshal
Posts: 67289
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That's different. In the first example, the colors only apply to the option in certain browsers -- and anything that isn't cross-browser is a "doesn't work" in my book.

The second example is a select list, not a select dropdown.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Bear Bibeault wrote:That's different. In the first example, the colors only apply to the option in certain browsers -- and anything that isn't cross-browser is a "doesn't work" in my book.

The second example is a select list, not a select dropdown.



Bear,

I booted up my Vms and tested my example in following on windows: IE6, IE7, IE8, IE9RC, Safari, Chrome, Opera 11, and Firefox 3. The color is applied correctly. If you do not use the little bit of JavaScript code I added to it, than the css would not apply to the elements with certain browsers.

If I was not coding right now with VS, I would boot into OSX and see what the results are there.

Eric
 
Bear Bibeault
Marshal
Posts: 67289
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Ah, you applied JavaScript magic? (don't have time to look right now). Even with that, it doesn't appear to affect WebKit browsers (at least under OS X).
I'll check out the script you used.
 
A day job? In an office? My worst nightmare! Comfort me tiny ad!
Java file APIs (DOC, XLS, PDF, and many more)
https://products.aspose.com/total/java
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!