I have a input field as below

    <lightning-input variant="label-hidden" type="number" 
placeholder="Calculate" class="inputFieldColor ">

CSS below to change its background color to red

.inputFieldColor {
  background-color : red;
  color: red;

but instead of filling the background with red color, it just fills the corners of the input field, below is the snippet of the same, please suggest how it can be filled with the red color.

enter image description here

  • Please share the reason of down vote? – gs650x Nov 12 at 11:12
  • @sfdcfox all the answers mentioned in the thread doesn't address my issue, I don't understand why did you mark this question as duplicate? – gs650x Nov 13 at 7:31
  • Because the other answers are correct. You cannot set the background color of a lightning-input's inner components, since it is in a different component that you do not control. You would need to write your own component. – sfdcfox Nov 13 at 13:34
  • when you say write your own component, does it mean I need to write html input field instead of lightning input field? – gs650x Nov 13 at 13:38
  • That's correct. CSS isolation is what's keeping you from making the changes you desire, so you'd have to write your own. – sfdcfox Nov 13 at 14:08