Changing CSS on Employee Center Portal Topic Page

Franchesca Liz1
ServiceNow Employee
ServiceNow Employee

 

Screenshot 2023-08-29 at 2.53.00 PM (2).pngHi 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. 

2 REPLIES 2

Franchesca Liz1
ServiceNow Employee
ServiceNow Employee

This is when you clicked on the HR mega menu

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 &amp;&amp; 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.

Claude E. D'Amico, III - CSA