input {
width: 100%;
}
.input-currency:after {
position: absolute;
right: 0;
top: 10px;
content: 'USD';
border-left: 1px solid black;
padding: 0 7px;
padding-right: 4em;
}<div class="input-currency">
<input id="value" name="value" type="text" class="form-control m-input class" aria-describedby="basic-addon1">
</div>I am working on a project that involves creating a unique input field with a currency text to the right side. Here is a snippet of the code:
<div class="input-currency">
<input id="value" name="value" type="text" class="form-control m-input class" aria-describedby="basic-addon1">
</div>
Additionally, I want to enhance this input field by adding a select option for different currency texts. When the user clicks on the 'USD' text, it will display other currency options like 'EUR', but the layout will remain consistent with the existing CSS styling.
The reason for using a select option is to capture the chosen currency value upon form submission to store it in a database.
Any assistance on achieving this feature would be greatly appreciated.
Thank you for your help!