input numeryczny z dopisem

Question

Chciał bym uzyskać efekt jak wyżej, input jest type="number" i żeby był ciągle dopisek "szt." oczywiście jak będzie wpisana większa liczba to żeby "szt." nie nachodziły na liczbę.

Answer 1

Można spróbować np. tak

[ on-line ]

<div class="input-container">
  <input type="number" name="pieces" min="0" max="999" value="0">  
  <span class="pieces_units">szt.</span>
</div>

...

.input-container .pieces_units {
  --left: 1;
  ...
  left: calc(((var(--font-size) / 2) * var(--left)) + 0.45em);  
}

i za pomocą javascript "ustalać" bieżącą wartość dla --left

Answer 2

Pewnie, zależy wiele sposobów jest na to 
https://stackoverflow.com/questions/30793482/input-with-type-number-but-add-alphabetical-suffix
Np.

#my-input {
  font: 12px arial;
}

#my-input-container {
  display: inline-block;
  position: relative;
}

#my-suffix {
  position: absolute;
  margin-left: 5px;
  top: 1px;
  color: #555;
  padding-left: 5px;
}

<div id="my-input-container">
  <input type="number" id="my-input" value="12345">  
  <span id="my-suffix"> szt.</span>
</div>

 CO nie co więcej https://designsystem.digital.gov/components/input-prefix-suffix/