Inside Oracle APEX by Patrick Wolf

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. :-)