If the lightning-input field is not read only the default padding left is 2rem. Once it is on readonly the padding left is changed to .75rem resulting to this behavior.

is there a way to target the css of that one programatically? enter image description here

this that I have tried ,

  1. I tried to disable the lightning-input via CSS by putting user-input : none,

  2. I tried targetting via input:read-only but it resizes the whole textfield not just the inside part of it (I guess I am trying to target the wrong element)

  3. I have tried to applying dynamic class , still no luck.

any thoughts about this? Thanks.

1 Answer 1


Due to shadow DOM you cannot target those elements, but you can customize it via styling hooks.
Please note that padding-left is setted using CSS var function, that get two parameters: a custom property (--lwc-spacingSmall in this case) and a fallback value. In a parent component you can set the custom property in order to customize your CSS.

I would give a custom css class (i.e. p-left-large) to the lightning-input element in order to customize the padding only for that one in the css file.


:host .p-left-large {
    --lwc-spacingSmall: 2rem;
  • That worked like a charm, Thank you so much!
    – Snorlax
    May 16, 2021 at 14:09

You must log in to answer this question.

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