Win a copy of Node.js Design Patterns: Design and implement production-grade Node.js applications using proven patterns and techniques this week in the Server-Side JavaScript and NodeJS 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 Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Rob Spoor
  • Tim Cooke
  • Junilu Lacar
Sheriffs:
  • Henry Wong
  • Liutauras Vilda
  • Jeanne Boyarsky
Saloon Keepers:
  • Jesse Silverman
  • Tim Holloway
  • Stephan van Hulst
  • Tim Moores
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Mikalai Zaikin
  • Piet Souris

Multicolor combo box in JSP/HTML

 
Greenhorn
Posts: 5
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I want to create a combobox in html where each word in each selection is a different color.

The following code makes an option in the combo box red:

<option style="color: #FF0000">Combo option</option>

However, I would like the word "Combo" to be red, and the word "option" to be green.

I've tried the following:

<option style="color: #FF0000">Combo <span style="color: #00FF00">option</span></option>

and also:

<option><span style="color: #FF0000">Combo</span> <span style="color: #00FF00">option</span></option>

but neither worked.
 
Ranch Hand
Posts: 254
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Not sure why you want to have it that way, but I'm sure you can't do it with standard select box. You may want to try to write your own select box with with css & javascript or use flash.
 
Bartender
Posts: 2856
10
Firefox Browser Fedora Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Welcome to Javaranch Aditya Bhanose
Please choose an appropriate forum for your questions.Asking questions in an unrelated forum yields fewer and less useful response. Read this for more information.
 
Aditya Bhanose
Greenhorn
Posts: 5
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I need to display two diffrent values in the select box.

<option><%=lang.getName()%> <%=lang.getShortName()%> </option>

In this it becomes difficult for user to diffrentiat both the values. Putting a separater(-) is also not that helpful. I am looking for solution where user can easyly see both the values.

I have data like:

United States Of America USA
India Ind
South Africa SA

You can see first value in each row is not of fixed width, and Its difficult to understand which is short name (2nd value).Is there any way we can give fixed width to values in option?
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
FYI: HTML does not have a combobox

You can not style the text differently inside of the option tag. It is all or nothing.


For the fixed width, you would have to put whitespace manually into it. [That is if the select element will honor it and not trim it.]

Eric
 
Aditya Bhanose
Greenhorn
Posts: 5
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I think I should go with using separator or manually adding spaces between the words.

Thanks For Reply

-Aditya
[ November 26, 2008: Message edited by: Aditya Bhanose ]
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic