Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

Change Typeahead Search CSS

leandrolope
Tera Contributor

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?

11 REPLIES 11

This way there was also no effect

RaghavSh
Mega Patron

@leandrolope Try this is page specific css

 

#x199aecc4c7a83110b1c6677703c26078 input { // here after X the sys_id is your widget instance sys_id. You can find       this in HTML through isnpect as well.
border-radius: .8rem !important;
background-color: #E6F6EB !important;
border: none !important;
}

Raghav
MVP 2023
LinkedIn

@leandrolope did this work for you?


Raghav
MVP 2023
LinkedIn

I did exactly as you suggested, but it had no effect.

Strange and it worked perfectly for me. Make sure you are using correct widget instance and its in correct sp_portal page.


Raghav
MVP 2023
LinkedIn