1

Is there any way to change style for < lightning-input> in LWC (not Aura)?

all I want is change the border radius and color. I could have used slds input for styling then I have to write all kind of custom validation myself.

inputField.setCustomValidity("some custom validation error");
inputField.reportValidity();

This simply works in lightning-input

1

2 Answers 2

2

You cloud use the Styling Hooks Overview. Add following in your CSS file:

lightning-input{
--slds-c-input-radius-border: 3rem;
}
0

You could also override the style using something like this

style="border:solid red; border-radius: 2%;"
1
  • When you inspect lightning-input you'll see there are parent elements to the input tag. Styling only gets applied to outer element
    – Arindam
    Jul 9, 2021 at 3:45

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .