Fixed text inside an input

Question

I want to know if it is possible to fix a text in the end of an input field. I'm doing a money converter and the user have to type the value in Euro(for an example) and the other input is supposed to return the value in USD, and in the end of the input has to have the name of the currency. I'm only interested in know the HTML part of the fixed text in the input. I'm using React and Chakra UI.

I think this will help. (similar question) https://stackoverflow.com/questions/22941903/placing-static-text-at-the-end-of-an-input-field-using-html — Dula, Sep 14 '21 at 05:04
Could you show us your HTML - in particular to see how (if) the input element is wrapped in anything? — A Haworth, Sep 14 '21 at 08:23
Does this answer your question? [Placing static text at the end of an input field using HTML](https://stackoverflow.com/questions/22941903/placing-static-text-at-the-end-of-an-input-field-using-html) — random_hooman, Sep 20 '21 at 08:22

Yong · Accepted Answer · 2021-09-14T06:23:02.883

The way I would do it is add the text after the input, add a position: relative; on the Text you want to include inside the input and then adjust how further to the left or right the text is, using left or right. In this case I used left: -50px;. Run the snippet and see if it's how you want it to be.

div{
display: flex;
}
p{
position: relative;
left:-50px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
      <div>
        <input placeholder="Placeholder"><p>Text</p>
      </div>
  </body>
</html>

score 0 · Answer 2 · answered Sep 14 '21 at 08:37

If you wrap the input in another element, a label seems appropriate, then you can add a pseudo element to that and position the content using a translate.

In this snippet a small extra amount is added to the translate to give the effect of a bit of padding, so the USD isn't right up against the end of the input.

label::after {
  content: 'USD';
  display: inline-block;
  transform: translateX(calc(-100% - 5px));
}

<label><input/></label>

Fixed text inside an input

2 Answers2