Classic Drop-Down List Styling

Recently, there was a question on my blog related to drop-down list styling.

Refer: Original Question

How do we apply different colors to drop-down list values?

In this post, I will walk through a few examples of how we can use CSS to apply different background colors to drop-down list values. As an example, we will be using the 'Branding System Options' classic page which contains two drop-down lists.

Navigation: PeopleTools > Portal > Branding > Branding System Options

Identifying the style classes to target

The first step to overriding delivered CSS is to identify the style class(es) to target. We can do this using the browser's developer tools.

Overriding CSS using Component Branding

Since we are focusing on Classic UI, we can use the Component Branding feature which is available via the Branding Framework configuration to apply a custom Stylesheet object to the Component (PTBRANDINGSYSTEMOP).

Navigation: PeopleTools > Portal > Branding > Component Branding

Zebra Striping

In this approach we will use the nth-child() CSS to alternate between two different background colors as shown below.

Option 1: All Drop-Down lists on the page/component

	.pt_classic_plus select.PSDROPDOWNLIST :nth-child(odd),
	.pt_classic_plus select.PSDISABLED :nth-child(odd),
	.pt_classic_plus select.PSDROPDOWNLIST_DISABLED :nth-child(odd),
	.pt_classic_plus select.PSDROPDOWNLISTDISABLED :nth-child(odd),
	.pt_classic_plus select.PSERROR :nth-child(odd) {
	background-color: #cdcfd1;
	}
	.pt_classic_plus select.PSDROPDOWNLIST :nth-child(even),
	.pt_classic_plus select.PSDISABLED :nth-child(even),
	.pt_classic_plus select.PSDROPDOWNLIST_DISABLED :nth-child(even),
	.pt_classic_plus select.PSDROPDOWNLISTDISABLED :nth-child(even),
	.pt_classic_plus select.PSERROR :nth-child(even) {
	background-color: #e1e2e3;
	}

view raw SV_DROPDOWN_CSS - 1 hosted with ❤ by GitHub

Option 2: Specific Drop-Down list on the page/component

Notice the #PSBRSYSTOPT_WRK_PTBRANDTHEME in the CSS selector.

	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLIST :nth-child(odd),
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDISABLED :nth-child(odd),
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLIST_DISABLED :nth-child(odd),
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLISTDISABLED :nth-child(odd),
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSERROR :nth-child(odd) {
	background-color: #cdcfd1;
	}
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLIST :nth-child(even),
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDISABLED :nth-child(even),
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLIST_DISABLED :nth-child(even),
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLISTDISABLED :nth-child(even),
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSERROR :nth-child(even) {
	background-color: #e1e2e3;
	}

view raw SV_DROPDOWN_CSS - 2 hosted with ❤ by GitHub

Styling specific rows

In this scenario, we will assume that we already know the rows that we want to style differently. Let's say, we want to display the custom Themes (with "SV_" prefix) differently.

Option 1: If we know the row numbers

	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLIST :nth-child(8),
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDISABLED :nth-child(8),
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLIST_DISABLED :nth-child(8),
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLISTDISABLED :nth-child(8),
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSERROR :nth-child(8) {
	background-color: #cdcfd1;
	}
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLIST :nth-child(9),
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDISABLED :nth-child(9),
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLIST_DISABLED :nth-child(9),
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLISTDISABLED :nth-child(9),
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSERROR :nth-child(9) {
	background-color: #cdcfd1;
	}

view raw SV_DROPDOWN_CSS - 3 hosted with ❤ by GitHub

Option 2: CSS based on attribute value prefix

	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLIST option[value^="SV_"],
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDISABLED option[value^="SV_"],
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLIST_DISABLED option[value^="SV_"],
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLISTDISABLED option[value^="SV_"],
	.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSERROR option[value^="SV_"] {
	background-color: #cdcfd1;
	}

view raw SV_DROPDOWN_CSS - 4 hosted with ❤ by GitHub