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!

[Nikhil_Preeti24]

Same here Wei, Did you find the solution?

[Community Alums]

Hi 
Any solution to this. I am trying to bring the magnifier glass to left instead of right. Any help would be helpful

Thanks in advance

[Manu31]

Hello @Community Alums ;

Did you receive any update on this, as I also need to customize the typehead search for AI search.

Thank You !!

[Manu31]

Hi,

Did you get any update on this. As i need to do some changes on the typehead search glyph and need to add the custom glyph.

Thank You !!

[Philippe Luickx]

You can not overwrite components built with the next experience technology stack by putting it in css and using !important like you could with angular widgets. This is because of how shadow dom works.

Only aspects you can influence is whatever variables are defined on the components, so styling is really limited to what is "allowed".

You can find more info on all used components on the library website: https://developer.servicenow.com/dev.do#!/reference/now-experience/components