| Re: HTML select field where the OPTION text is of different colors [message #172777 is a reply to message #172767] |
Mon, 28 February 2011 23:33   |
Captain Paralytic
Messages: 204
Registered: September 2010
Karma:
|
Senior Member |
|
|
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>
|
|
|
|
Calendar
Search
Help
Members
Register
Login
Home
]