Add colors or images to your select list

Some time ago I was asked if it’s possible to set the background color of the entries of a select list.

Sure why not! I thought I had already answered the question before, so I searched on the OTN forum but didn’t find my posting. No problem, shouldn’t be too hard to find the solution again.

My first attempt was to use the span tag with the style attribute in the lov query, like

SELECT '<span style="background-color:red">'||
       DESCRIPTION||
       '</span>' AS D
     , OID       AS R
  FROM REQUEST_STATUS
 ORDER BY OID

Nice try, but it didn’t work, because the span tag is ignored for select list elements.

My next attempt was to change the option tag which Oracle Application Express (APEX) generates. Like with the following lov query

SELECT DESCRIPTION AS D
     , OID||'" style="background-color:red' AS R
  FROM REQUEST_STATUS
 ORDER BY OID

Great that worked, the select list showed the red background color. But wait! For existing records the current select list entry wasn’t displayed anymore.

Why? Because I modified the index column by adding the ” style=…, so Oracle Application Express (APEX) wasn’t able to map the database column value to the select list entry anymore. So that wasn’t really a working solution.

I think the only really working solution is to use some JavaScript code in the “Post Element Text” property of the page item.

<script type="text/javascript">
$x("P5_STATUS")[2].style.backgroundColor = "yellow";
$x("P5_STATUS")[3].style.backgroundColor = "red";
</script>

The APEX Javascript function $x will return an array with all the options of a select list. The array starts with 0. As you can see it’s quite easy to change the style of a single option and assign a different background color to it.

BTW, if you have a Firefox only environment, you can also assign images. Too bad that Internet Explorer doesn’t support it. The code for example would be:

<script type="text/javascript">
$x("P5_LANGUAGE")[1].style.background = "transparent url(uk.png) no-repeat";
$x("P5_LANGUAGE")[1].style.paddingLeft= "30px";
$x("P5_LANGUAGE")[2].style.background = "transparent url(de.png) no-repeat";
$x("P5_LANGUAGE")[2].style.paddingLeft= "30px";
</script>

BTW, you can also put the stuff into a CSS and assign a class to the option.

Don’t think that I really have solved that in the past, must have been something else with select lists. :-)

7 thoughts on “Add colors or images to your select list

  1. You know it!

    If it wasn’t for IE almost anybody could do this javascript stuff way too easily.

    But thanks to MS I’m guaranteed a job for quite awhile ;)

    Carl

  2. Hey Patrick,

    Thanks for the great post.

    I tried it and it worked, but it’s not really what I wanted to do. I want the select list to change color after my selection. In my case it should turn (or stay) red if a user does not make a selection.

    In my project a field should turn red if there is no entry. I solved this problem for a textfield by importing a javascript. It does not seem to work on selectlists.

    Please advise..

  3. Hi Patrick;

    My siutation is a little different and I’m pulling my hair out over what should not be “rocket-surgery”…

    I have a tabular form with a select list. If the value from the database for this item is a cetain value, I want to change the font and background colors so it’s easily noticed.

    Any ideas?

    Any help sincerely appreciated!

    Thanks – Steve

  4. Martin;

    I found someting that works for me. I capture the change event for the form element using: onChange=”StatusChange(this)”. From there:

    var lEl = html_GetElement(nd);

    lEl.disabled = true; //or false – if needed.
    lEl.style.background = ‘#cccccc’;

    Hope that helps.

    Steve

Comments are closed.