Change field CSS properties for Next Experience UI

[Brad Warman]

Does anyone know how to update the CSS for all Next Experience UI fields? I want to remove the box shadow for all fields across all tables but can't seem to find the correct CSS property/hook to use.

How it currently looks:

How I want it to look:

I can see the property below against .form-control when inspecting the page, but I can't find how to change it permanently for all fields on all tables.

box-shadow: 0 0 0 0 RGBA(var(--now-color--primary-1,79,82,189),.1),inset 0 0 0 0 RGB(var(--now-color--primary-1,79,82,189)),inset 0 0 0 0 RGB(var(--now-color--neutral-0,255,255,255)),inset 0 2px 0 1px RGBA(var(--now-color--neutral-18,21,25,32),.1);

Any help will be greatly appreciated.

Cheers,

Brad

[Brad Tilton · Accepted solution]

Hey Brad,

It doesn't look like you can directly target the box-shadow property from the theme. You can change, through the theme, the places where you see --now-color-primary-1, etc. so the color could change. To find out more about theming overall I would check out this page: https://community.servicenow.com/community?id=community_article&sys_id=a33fb397db590110e515c22305961...

[Brad Warman]

Thanks Brad, I thought that might be the case. I can't really change the colour property itself as it will change other components of the page where we don't want it to. I'll let management know they just need to get used to the box shadow 🙂

[Paulo Costa1]

Hey,

Had the same requirement, and through trial and error found this works well on my copy of the original style in the sys_ux_style table:

"--now-color--neutral-18": "255,0,0",