HTML text input field with currency symbol in the end of it

问题

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

My html code:

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

Css code:

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

Here is jsfiddle : DEMO

回答1:

Why not set right instead of left:

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

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.

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

回答2:

You need to set right instead of left. Which place the content based on the right side of input

.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>

回答3:

Use the :after pseudo class, and position the content from the right side of the box:

.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>

来源：https://stackoverflow.com/questions/32950987/html-text-input-field-with-currency-symbol-in-the-end-of-it

标签

html

css

html5

html-input