I am using lightning-input of type number (LWC) and trying to have input text center aligned.

At the end, element's class is being set to "slds-input", So I cannot use custom class to add css.

I am not able to override text-align with css mentioned below. What am I missing? Please help.


input.slds-input {
    text-align: center

Rendered HTML enter image description here

  • 1
    You can't do this. LWC uses a shadow DOM to prevent this type of style tampering. You'll have to write your own custom component instead. – sfdcfox Nov 16 '19 at 20:24
  • Thank you @sfdcfox – Sriram Nov 16 '19 at 21:01

Try to add "slds-align_absolute-center"right afer the slds-input. If it doesn't work to add a div in top:

<div class="slds-align_absolute-center">
 <input lightning-input ....... />
  • I tried "slds-align_absolute-center", no luck. It works for direct html "<input>" element, its just that LWC component does not allow to override css of <input> element generated by Salesforce. – Sriram Nov 16 '19 at 19:33

After spending a lot of time, the below approach got worked (which is written in connectedcallback method).

Apply input-text-align_right class name to lightning-input tag.

const inputAligncenter = document.createElement('style');
inputAligncenter .innerText = `.input-text-align_right input{ text-align: center!important; }`;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.