Service Portal - sn-search-combobox (AI SEARCH search bar) - custom styling

[schwarz_patrik_]

Hello all, hope you are having a great day!

My question is very simple, is it possible to apply custom styles to the search input used with AI Search in ServicePortal? (the search input generated by directive sn-search-combobox)

I tried adding the css into the parent widget & theme, but none of those did apply the styles to the search input.

Upon further investigation, the search input is rendered inside shadowRoot, so global styles probably won't work here.

Is there a workaround how to apply styles to the search input please ?

Is it even possible to modify lets say the border color or border radius on the sn-search-combobox search input?

Thanks a lot for any hints & tips!

[Simon Ohle]

Struggling with this as well. Found anything? It has to do with the shadow-dom.

[Shamus Mulhall]

Theming for AI Search in Service Portal

https://docs.servicenow.com/bundle/tokyo-servicenow-platform/page/build/service-portal/reference/ais...

Create a CSS include to override theming for AI Search in Service Portal

https://docs.servicenow.com/bundle/tokyo-servicenow-platform/page/build/service-portal/task/css-over...

[petr_minarik]

Hi, this is very limited regarding styling, especially as we need to modify it to our custom portal's homepage. I have found some styling guides for shadow dom, but as it's multiple nested components, it seems it's not possible to style using ::part etc...

Is there some way how to access the component and modify it as needed?

[Wei_ Ling]

I have not met many problems with you. I need to change the border of the input box into rounded corners. Have you found the solution?