Display units in HTML step <input type = "number">

Question

I want the user to enter numbers with the unit type "cm", "kg" or "$". This can be done in jQuery UI: Example

However, I would like to implement it in pure html, for example:

input{ display: inline; } div.euro-sign::after{ content: "€"; margin-left: -40px; } 

 <div><input placeholder="5 €" type="number" step="1"></div> <div><input placeholder="5 €" type="number" step="1" unit="€"></div><!-- NOT working --> <div class="euro-sign"><input placeholder="5" type="number" step="1"></div><!-- Workaround --> 

Is there a more natural way to do this (e.g. example 2) or do I need to implement a workaround (example 3)?

Answer 1

 $(".original input").on("change", function(){ $(".duplicate input").val(this.value + '€'); }); $(".duplicate input").on("change", function(){ $(".original input").val(this.value.substring(0, this.value.length - 1)); }); 

 .duplicate { position: relative; top: -20px; left: 2px; float: left; } .duplicate input { width: 145px; border: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="euro-sign"> <div class="original"> <input type="number" step="1"/> </div> <div class="duplicate"> <input type="text" value="0€"/> </div> </div> 

Answer 2

Offer to use radio buttons ...

 <div> <input type="radio" name="Money " value="YEN">YEN ¥ <input placeholder=" 0" type="number" name="HowMuch " step="5" min="0"> </div><br> <div> <input type="radio" name="Money " value="USD" checked>US $ <input placeholder=" 0" type="number" name="HowMuch " step="5" min="0"> </div><br> <div> <input type="radio" name="Money " value="EURO">EUR € <input placeholder=" 0" type="number" name="HowMuch " step="5" min="0"> </div><br> <input type="submit">