如何在HTML输入字段中添加不可删除的后缀？

Question

我需要帮助来做这样的事情

  

对于前缀，我使用了jQuery前缀输入。它工作正常，但现在我想把它放在输入框之后，它应该是相同的响应。

htm code

<div class="input-group">
    <input type="text" class="form-control" placeholder="Price"/>
<span class="input-group-addon">$</span>

</div>

CSS

.input-group-addon
{ 
  background-color:#FFF;
}
.input-group .input-group-addon + .form-control
{
   border-left:none;
}

这里解释美元符号

here is first demo

second demo

但根据我的要求图片，这对我不起作用

Answer 1

看看这个 -

CodePen Example

每当你想做这些事情时，请考虑以下事项：

1. 父div position:relative;
2. 您想要其他元素的元素（在您的情况下，为其input标记）
3. 您想要使用position:absolute;
放置的元素

因此，position:absolute;元素将使您能够将该元素移动到该父div内的另一个元素，并且由于父position:relative;，它将始终与该元素一致。