Change Typeahead Search CSS

[leandrolope]

Hi everyone,

I need to change the CSS properties of the ".input-container":

border-radius: .8rem !important;
background-color: #E6F6EB !important;
border: none !important;

And the placeholder:

color: #00713F
font-weight: 700

If I change it directly in the browser for the ".input-container", it works. I haven't tested it for the placeholder yet.

But if I insert the CSS for the ".input-container" in the widget that calls "Typeahead Search", it doesn't work.

Does anyone know a way to make these changes?

[KrishnaMohan]

Hi @leandrolope 
may be style is coming from page level or widget instance. 

1) Add you code in widget instance if your widget instance have css field.

2)  Or add your style code in page level where widget is placed or used  

In a ServiceNow Service Portal, styles are loaded in a specific order, and their precedence is determined by where they are defined. Here is the general hierarchy from least specific (easily overridden) to most specific (overrides almost everything):

1. Browser Defaults: The default styles for HTML elements.

2. Portal Theme: Styles defined at the theme level, which apply to the entire portal. These are often broad styles for the body, headings, etc.

3. Page Level: Styles defined in the "Page CSS" field of a specific Service Portal page record. These are more specific than the theme but still apply to the entire page.

4. Widget CSS: Styles defined in the "CSS" field of the widget record itself. This is what you're trying to use.

5. Widget Instance CSS: Styles defined directly on a specific instance of a widget when you add it to a page. This is the closest thing to an inline style in Service Portal.

6. Inline Styles (style=""): Styles applied directly to an element within the HTML of the widget. This has the highest specificity.

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards,
Krishnamohan

[leandrolope]

I tried both in the page CSS and in the widget instance but it didn't work.

[Laveena-Agarwal]

Hi @leandrolope 

Kindly check if the CSS is being applied to the correct class.
Try adding the CSS under Theme > CSS Includes in the Stylesheets section, and ensure you add this class name in the Parent class.

If the issue still persists, share the widget details along with where exactly you want this change to appear.

I will give it a try in my PDI.

[leandrolope]

I'll try your suggestion.

The widget is Typeahead Search.

The class is ".input-container".