| Re: HTML select field where the OPTION text is of different colors [message #172779 is a reply to message #172777] |
Tue, 01 March 2011 00:41   |
The Natural Philosoph
Messages: 993
Registered: September 2010
Karma:
|
Senior Member |
|
|
Captain Paralytic wrote:
> On Feb 28, 1:31 pm, "gemo...@gmail.com" <gemo...@gmail.com> wrote:
>> On Feb 28, 9:52 am, venky_lb <lb.ve...@gmail.com> wrote:
>>
>>> Hi
>>> Is it possible to have an HTML select field where the OPTION text is
>>> of different colors?
>>> <select>
>>> <option>Black_text (yellow_text)</option>
>>> </select>
>>> I tried using an CSS SPAN element to color the text but that doesn't
>>> seem to work.
>>> Any ideas?
>> It's impossible. The only one thing that you can try is to emulate
>> select/options by javascript, but it's not easy
>
> It's impossible is it. I wish you'd told me that before I actually did
> it last year for a client of mine. Now I guess I'll have to tell them
> that they can't use it any more because it is now impossible!
>
> Although this has nothing to do with php, for anyone interested in
> performing the impossible, here is an example of doing it with
> different background colours. I will leave it as an exercise for the
> reader to change it to use text colours (apart from those that find it
> impossible).
> <select onchange="this.style.backgroundColor='#'+this.value;"
> style="background-color: rgb(255, 0, 0);" name="fd_colour" size="1">
> <option style="background-color: rgb(255, 255, 255);"
> value="ffffff">Colour</option>
> <option selected="" style="background-color: rgb(255, 0, 0);"
> value="ff0000"> </option>
> <option style="background-color: rgb(255, 153, 0);"
> value="ff9900"> </option>
> <option style="background-color: rgb(255, 255, 0);"
> value="ffff00"> </option>
> <option style="background-color: rgb(0, 255, 0);"
> value="00ff00"> </option>
> <option style="background-color: rgb(0, 255, 255);"
> value="00ffff"> </option>
> <option style="background-color: rgb(159, 197, 232);"
> value="9fc5e8"> </option>
> <option style="background-color: rgb(215, 172, 255);"
> value="d7acff"> </option>
> <option style="background-color: rgb(255, 0, 255);"
> value="ff00ff"> </option>
> <option style="background-color: rgb(255, 204, 153);"
> value="ffcc99"> </option>
> <option style="background-color: rgb(255, 153, 204);"
> value="ff99cc"> </option>
> <option style="background-color: rgb(204, 255, 204);"
> value="ccffcc"> </option>
> <option style="background-color: rgb(255, 255, 153);"
> value="ffff99"> </option>
> </select>
How many browsers did you actually TRY that one?
My memory is that such tricks (style inside OPTION) work with firefox ,
but not e.g. IE6.
I am fairly sure they worked in the MAC default browser as well..but IE6
stubborn refused to parse them.
Which is why I went the javashit route: It was in the end MORE cross
browser compatible.
|
|
|
|
Calendar
Search
Help
Members
Register
Login
Home
]