Text input with currency icon in the center

Question

I want to have a input element for currency where there is a currency icon always at the center (but it adjusts according to the number of digits)

Something like:

This is what I've come up with:

const input = document.querySelector('input');
input.addEventListener('input', resizeInput);
resizeInput.call(input);

function resizeInput() {

  this.style.width = this.value.length + "ch";
}

* {
  font-size: 1.3em;
}

.currency_input {
  width: 10em;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  border-radius: 15px;
}

input {
  min-width: 10%;
  max-width: 80%;
  padding: 0.1em;
  margin: 0.1em;
  border: 0;
}

input:focus,
input:focus {
  outline: none;
}

<div class="currency_input">
  <span> $ </span>
  <input type="text" name="name" autocomplete="off" maxlength="4">
</div>

Is there a better way? Things I haven't taken into considerations? Making it more responsive to be able to resize well? (Of course I will validate input later on)

Answer 1

I think that your solution is pretty good, but, since it's a money input, you should change the input's type to number.

<input type="number" name="name" autocomplete="off" maxlength="4">

Answer 2

May be something like

.container {
  position: relative;
  height: 100px;
  width: 200px;
  margin: auto;
  border: solid 1px black;
  border-radius: 1em;
  font-size: 1em;
}

.currency_input {
  position: absolute;
  width: 50%;
  top: 50%;
  transform: translate(calc(100% - 0.5em),-50%);
}

input {
  width: 75%;
  border: none;
}

input:focus {
  outline: none;
}

<div class="container">
  <div class="currency_input">
    <span> $ </span>
    <input type="text" name="name" autocomplete="off" maxlength="4">
  </div>
</div>