0

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.

<lightning-input
     type="number"
     name="inputNumber"
     class="inputNumberCenter"
     value={answer}
     onchange={handleValueChange}
     step="1">
</lightning-input>


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 at 20:24
  • Thank you @sfdcfox – Sriram Nov 16 at 21:01
0

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 ....... />
</div>
  • 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 at 19:33

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.