Popup LOVs are one of those APEX components that work perfectly well out of the box — and look completely plain while doing it. Every row looks the same. In APEX Instant Tips episode 100 Mike Hichwa (name drop) showed how to add icons to your Popup LOVs. There are a lot of other things you can do, though. If your LOV is a list of status values or color options, wouldn't it be nice if the LOV rows were actually styled with the colors the user is choosing between?

Marwa and I covered exactly this in AIT episode 190, and the solution is smaller than you might expect. Below is an example of how to do it using APEX classes. Starting with this example you can figure out how to do a lot of other things with your Popup LOVs. (And...yes, APEX has a built in color-picker. If all you want is a color-picker, you should use that. This is just a clear way to show how to use the APEX classes to style your Popup LOVs in general.)

The SQL

The LOV query does most of the work. The key is adding a LOV_CLASS column that contains the CSS class (or classes) you want applied to each row in the popup.

with one_45 as (
    select level the_number
      from dual
    connect by level <= 45
    order by 1
)
select 'u-' || column_value  d,
       'u-' || column_value  r,
       'fa-traffic-light-stop' icon,
       'u-' || column_value || ' u-opacity-40'  lov_class,
       column_value display2
  from apex_string.split('normal,hot,warning,danger,info,success', ',')
union all
select 'u-color-' || the_number  d,
       'u-color-' || the_number  r,
       'fa-ai-sparkle-enhance-color' icon,
       'u-color-' || the_number  lov_class,
       'Color ' || the_number  display2
  from one_45

This query builds a list of every CSS color utility available in Universal Theme — no custom CSS needed. The first block covers the six semantic color classes (u-normal, u-hot, u-warning, u-danger, u-info, u-success). The second block generates all 45 numbered color classes (u-color-1 through u-color-45).

A few things worth pointing out:

The d and r columns hold the CSS class name itself — so when the user picks a value, what gets stored is the class name (e.g. u-danger). You can then apply that directly to an element in your application.

The semantic colors get u-opacity-40 added to their lov_class. Without it, those rows render at full intensity, which is fine — but a little opacity makes the list easier to read at a glance without being overwhelming.

The icon column adds a Font APEX icon to each row. The traffic light icon suits the status colors; the sparkle icon works well for the numbered palette.

display2 is a second display column that shows a human-readable label alongside the class name. More on that in a moment.

The JavaScript Initialization Code

This is where it all comes together. In Page Designer, open the Popup LOV item and find the JavaScript Initialization Code attribute. Add this function:

function(options) {
    options.columns.D.cellCssClassesColumn = 'LOV_CLASS';
    options.columns.DISPLAY2.cellCssClassesColumn = 'LOV_CLASS';
    return options;
}

That's it. The cellCssClassesColumn property tells APEX which SQL column to read for CSS classes, and applies those classes to the cells in that column. Here we're wiring it up to both the D column (the main class name display) and DISPLAY2 (the human-readable label), so the entire row gets styled consistently.

You can apply the classes to as many columns as you like, or just one. If you wanted to style only the label column and leave the class name column plain, you'd just set it on DISPLAY2 alone.

Why This Works

Universal Theme ships with all of these color utility classes already. You're not adding a single line of custom CSS — just telling the LOV to apply classes that are already on the page. The u-color-* classes cover 45 distinct colors, and the semantic classes like u-danger and u-success follow the application's theme automatically.

For more details, check out APEX Instant Tips episode 190.