[SalesForce] Unable to set Text Alignment for lightning-input (Number) LWC component

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

Best Answer

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; }`;
document.body.appendChild(inputAligncenter);

Related Solutions

Get the Current Value from a Lightning-Input-Rich-Text

Avoid using onChange and may be use the querySelctor instead as shown below

<template>
   <lightning-input-rich-text value={myVal}>
   </lightning-input-rich-text>
   <lightning-button label="send" onclick={handleClick}></lightning-button>
   <lightning-formatted-rich-text value={myVal}></lightning-formatted-rich-text>
</template>

The Javascript file

 import { LightningElement } from 'lwc';
 export default class RichTextExample extends LightningElement {

    myVal = '';

    handleClick(event) {
      const value = this.template.querySelector('lightning-input-rich-text').value;
      this.myVal = value;
  }
}

Can we use styling hooks on lightning-progress-indicator ? Or how to change background color of steps

For type="base" use the progressBarColorBackgroundFill design token to change the default color of the Progress indicator.

CSS

.custom-css {
  --lwc-progressBarColorBackgroundFill: green;
}

HTML

<template>
    <lightning-card>
        <lightning-progress-indicator class="custom-css" current-step="3" type="base" has-error="true" variant="base">
            <lightning-progress-step label="Step 1" value="1"></lightning-progress-step>
            <lightning-progress-step label="Step 2" value="2"></lightning-progress-step>
            <lightning-progress-step label="Step 3" value="3"></lightning-progress-step>
            <lightning-progress-step label="Step 4" value="4"></lightning-progress-step>
        </lightning-progress-indicator>
    </lightning-card>
</template>

UPDATE: The above example is for type="base" and the below example is for type="path" for progress indicator.

For type="path" use the colorBackgroundPathComplete and colorBackgroundPathCompleteHover design token to change the default color of the progress indicator.