输入中的固定文本

Question

See image for reference

我想知道是否可以修复输入字段末尾的文本。我正在做一个货币转换器，用户必须输入欧元值（例如），另一个输入应该是 return 美元值，并且在输入的末尾必须有货币名称。我只想知道输入中固定文本的 HTML 部分。我正在使用 React 和 Chakra UI.

Answer 1

我的做法是在输入后添加文本，在要包含在输入中的文本上添加 position: relative;，然后调整文本向左或向右的距离，使用 left 或 right。在这种情况下，我使用了 left: -50px;。运行片段，看看它是否是您想要的样子。

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>

Answer 2

如果您将输入包裹在另一个元素中，标签似乎是合适的，那么您可以向其添加一个伪元素并使用翻译定位内容。

在此代码段中，在翻译中添加了少量额外内容以产生一些填充效果，因此 USD 不在输入末尾。

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

<label><input/></label>

输入中的固定文本

Fixed text inside an input

html

css

input

fixed