HTML文本输入字段，在其末尾带有货币符号 [英] HTML text input field with currency symbol in the end of it

问题描述

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

I would like to have a html5 number input field containing the EUR sign, and no matter what editing occurs to the field, for the sign to be persistent. I tried to do that but the EURO sign is in beginning , I want to move this sign in the end of the input but for some reasons i can't do it? Any help? 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

Here is jsfiddle : DEMO

推荐答案

为什么不设置正确而不是左：

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

参见这个jsfiddle 。根据您想要的结果，根据需要调整值，如果您想要在输入之外，请将其设置为负值。

See this jsfiddle. Adjust the value as necessary depending on how far you want it from the end, and set it to a negative value if you want it outside the input.

因为你是绝对定位元素，在和之后之前没有区别，尽管使用<$ c在语义上更正确$ c>在之后。

As you're positioning the element absolutely, after and before make no difference, although it would be more semantically correct to use after.

这篇关于HTML文本输入字段，在其末尾带有货币符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！