[SalesForce] Search Icon Inside of lightning input in right Side

Unfortunately I concluded that, since Salesforce gives you a Proxy object back instead of the raw DOM element, it is currently not possible to do any sort of on-the-fly masking of an input value. I settled for a LWC that grabs the value after it has been typed, formats it appropriately, puts it back in the field, and runs validation. When the user focuses on the input field it removes the mask and lets them edit the "raw" value again:

HTML

<template>
    <lightning-input
        type="text"
        pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}"
        onfocus={strip}
        onblur={mask}
        onchange={handleChange}
        value={value}
    ></lightning-input>
</template>

JavaScript

const applyMask = input => {
    let value = input.replace(/-/g, '');
    if (value.length >= 6) {
        value = `${value.slice(0, 3)}-${value.slice(3, 5)}-${value.slice(5)}`;
    } else if (value.length >= 4) {
        value = `${value.slice(0, 3)}-${value.slice(3)}`;
    }
    return value;
};

const removeMask = input => input.replace(/-/g, '');

export default class SsnInput extends LightningElement {

    /**
     * ...
     */
    @api value;

    connectedCallback() {
        if (this.value) {
            this.value = applyMask(this.value);
        }
    }

    strip(event) {
      event.target.value = removeMask(event.target.value);
    }

    mask(event) {
        event.target.value = applyMask(event.target.value);
        event.target.reportValidity();
    }

    handleChange(event) {
        ...
    }
}

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);