Search Bar Radius

[Mohammad Amin]

Hi, All I am trying to make the Search bar rounded, and I can achieve that by Inspecting the element but when I am trying to pass values from the CSS includes, It's not working.

.input-container {
    display: flex;
    border: var(--mv9-PvZT-JvmzZvj--kvZptZ-9Apz8,1px) solid rgb(var(--now-color--divider-tertiary,var(--now-color--neutral-3,209,214,214)));
    border-top-left-radius: calc(1.25rem*var(--classicsponlydonotuse--rem-multipy, 1));
    border-top-right-radius: calc(1.25rem*var(--classicsponlydonotuse--rem-multipy, 1));
    background-color: RGB(var(--now-color--background-primary,var(--now-color--neutral-0,255,255,255)));
}

:host(:not([dir="rtl"])) .input-container, :root:not([dir="rtl"]) .input-container {
    border-bottom-right-radius: calc(1.25rem*var(--classicsponlydonotuse--rem-multipy, 1));
}

:host(:not([dir="rtl"])) .input-container, :host([dir="rtl"]) .input-container, :root:not([dir="rtl"]) .input-container, :root[dir="rtl"] .input-container {
    border-bottom-left-radius: calc(1.25rem*var(--classicsponlydonotuse--rem-multipy, 1));
}

/* I am adding value into the cal() */

Any suggestions or Help is highly Appreciated.

Thanks!

[Steven Young]

this is one of mine and i added the below to the css for this input box.

by just having border-radius it does all 4 corners.

border-radius: 25px;

[Mohammad Amin]

Thanks, young for your response.

I also tried to apply border-radius and it's not working in our dev environment but when I try to apply on my PDI it's working there.

The difference between the dev instance and my PDI is, that AI Search is enabled in Dev and is not in my PDI.

[Steven Young]

you may need to change the current CSS.
or remove the CSS from you input field by changing it's class and creating a new class (whatever you name your input field.

just having the AI search shouldn't matter,  but enabling AI search may bring with it additional CSS.

[sukl]

Hi Mohammad ,

have you got any update on this?, how did you override the above for borders