Question

我希望有一个包含EUR符号的html5号码输入字段，无论字段发生什么编辑，都要保持符号。我试图这样做，但EURO标志开始了，我想在输入结束时移动这个标志，但由于某些原因我无法做到这一点？有帮助吗？ Result

我的HTML代码：

<span class="input-symbol-euro">
    <input type="number" value="0" min="0" step="1"  />
</span>

Css代码：

 .input-symbol-euro {
     position: relative;
 }
 .input-symbol-euro input {
     padding-right:18px;
 }
 .input-symbol-euro:before {
     position: absolute;
     top: 0;
     content:"€";
     left: 5px;
 }

这是jsfiddle：DEMO

Answer 1

为什么不设置right而不是left：

.input-symbol-euro:after {
     position: absolute;
     top: 0;
     content:"€";
     right: 18px;
 }

见this jsfiddle。根据您想要的结果，根据需要调整值，如果您希望它在输入之外，则将其设置为负值。

由于您绝对定位元素，after和before没有区别，尽管使用after在语义上更正确。

Answer 2

您需要设置right而不是left。哪个内容基于输入的右侧

.input-symbol-euro {
  position: relative;
}
.input-symbol-euro input {
  padding-right: 18px;
}
.input-symbol-euro:after {
  position: absolute;
  top: 0;
  content: "€";
  right: 5px;
}

<span class="input-symbol-euro">
    <input type="number" value="0" min="0" step="1"  />
</span>

Answer 3

使用:after伪类，并从框的右侧放置内容：

.input-symbol-euro {
  position: relative;
}
.input-symbol-euro input {
  padding-right: 18px;
}
.input-symbol-euro:after {
  position: absolute;
  top: 0;
  content: "€";
  right: 5px;
}

<span class="input-symbol-euro">
    <input type="number" value="0" min="0" step="1"  />
</span>

HTML文本输入字段，在其末尾带有货币符号

3 个答案: