Changing CSS on Employee Center Portal Topic Page

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-29-2023 02:55 PM
Hi I have a requirement to change the color of the highlighted choice, in the picture it is BLUE. I need it to be a different color and I have been trying to use the Inspect tool on the browser to figure out where to change this but I am having no luck. We have used the branding editor for minor changes on the Theme Color of the portal and also a stylesheet for some of the custom CSS.

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-29-2023 02:58 PM
This is when you clicked on the HR mega menu
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-30-2023 12:42 PM
This one is a lot different. The browser is in control rather than the theme. I did find a way to do it, but it is not pretty so I wouldn't recommend it myself.
https://bobbyhadz.com/blog/css-change-select-list-option-background-color-on-hover
Needed to add onfocus, onblur, and onchange to the element. This solution is supported in multiple forums as well as statements about some browsers supporting option:hover for CSS which looked like just Firefox. This is what that <select> ended up looking like to make it work in Chrome for me:
<select id="filter_picker_select" onfocus="this.size=3" ng-disabled="contentItems.length === 0 && data.filterBy ===''" class="form-control ng-valid ng-touched ng-dirty ng-valid-parse ng-not-empty" name="filter_picker_select" ng-model="data.filterBy" title="Filter by" ng-change="getUpdatedContent()" aria-label="Filter by" ng-options="item.sysId as item.name for item in data.filterOptions" style="" size="0" onblur="this.size=0" onchange="this.size=1; this.blur()"><option label="All" value="string:">All</option><option label="Article" value="string:4c32a92153622010069addeeff7b12a3">Article</option><option label="Request" value="string:98f9a16553622010069addeeff7b1248" selected="selected">Request</option></select>
Additionally, CSS needed to be added to change the option color on hover ( option:hover { background-color: red; } ). Could do page level or widget level for the CSS. Need to edit the widget for modifying all the <select> elements.
I'm not happy with this outcome so I'm sorry I wasn't able to find a better solution.