How to put the % symbol at the end of the text in a text-box permanently?

I have a textbox that displays the percentage.

I want the % symbol at the end of the text, the % symbol should not be editable but the text in the text box should be editable.

How can this be implemented?

Answer

You can do it in pure CSS using the :after pseudo-element.

.inputbox-container:after {
    content: "025";
    margin-left: -25px;
    margin-right: 25px;
    padding-left: 6px;
}

input {
  padding-right: 20px;
}

<div class="inputbox-container"><input type="text"></div>