Unable to modify the height of the search bar

[unknown4]

Unable to modify the height of the search bar in employee center, when the ai search is enabled.

[SN_Learn]

Hi @unknown4 ,

Please check the below post, hopefully it will answer your query:

https://www.servicenow.com/community/virtual-agent-forum/i-am-trying-to-resize-my-searchbar-on-the-e... 

[Sheldon Swift]

Hi @unknown4 - What are you looking to accomplish? The CSS is defined on the "How can we help?" Instance here: /nav_to.do?uri=sp_instance.do?sys_id=199aecc4c7a83110b1c6677703c26078

[unknown4]

I want my search bar to look like below image, I wanted modify the height and radius of the search box. I tried updating the "How can we help?" Instance. still I'm it is not changing.

[Sheldon Swift]

It looks like you can style the sn-search-combobox element like this:

/* For suggestions in typeahead search when ais is enabled */
.aisearch {
  --now-color--primary-0: $brand-primary-opacity;
  --classicsponlydonotuse--rem-multipy: 3.6 !important;
}

However, the docs say it's not suggested to use the '--classicsponlydonotuse--rem-multipy' variable (Theming for AI Search in Service Portal)

Beyond that, applying styles directly to shadow DOM elements using CSS selectors from the main document is not possible due to the encapsulation provided by shadow DOM...so overriding the border radius on #homepage-search .aisearch .input-container likely can't be done on the "How can we help?" Instance.