CODEWITHSUNDEEP
htmlcss
Cyborg29
Cyborg29

Reputation: 73

How to add "€" sign to an input text

I want to add an "€" symbol on the right of the input field, I saw some examples online but sadly they dont work because I already have a label for my input. Is there a way to do it with the label already in use?

Heres the HTML code:

<div class="inputfield">
       <label> Example </label>
       <input id="idExample" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required>
</div>

and in case you want to see what CSS I have:

.inputfield input {
    border-radius: 10px;
    width: 100px;
    margin-left: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px;
}

Upvotes: 0

Views: 747

Answers (4)

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

I would use a pseudo-element, mostly because you then can set a data-attribute with javascript, if you ever going to need to change currency in the future.

Inputs don't have pseudo-elements, so I needed to wrap the input in a span. Then I'm able to use position: absolute in combination with transform: translate to put the € where I wanted it.

.inputfield input {
  border-radius: 10px;
  width: 100px;
  margin-left: 100px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;  
}

.inputfield span {
  position: relative;
}

.inputfield span[data-currency]::after {
  position: absolute;
  content: attr(data-currency);
  right: 1em;
  top: 50%;
  transform: translate(-100%, -50%);
}
<div class="inputfield">
  <label> Example </label>
  <span data-currency="€"><input id="idExample" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required></span>
</div>

Upvotes: 5

Lamphrangmi Lamin
Lamphrangmi Lamin

Reputation: 11

Try this out:

<input placeholder="Type something">
<span>&#8352</span>

Upvotes: 0

Ali Safari
Ali Safari

Reputation: 1775

The quickest and simplest way is just adding a currency sign before/after your input tag like:

<input id="idExample" class="currency" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required>&euro;

if you need to style the currency sign you can place it in a span tag:

 <input id="idExample" class="currency" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required><span class="euroClass">&euro;</span>

Upvotes: 1

Simon K
Simon K

Reputation: 1523

please see if the following works for you...

HTML

<div class="inputfield">
<label> Example </label>
<input id="idExample" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required>
<span class="currency">&euro;</span>

CSS

<style>
.inputfield input {
    border-radius: 10px;
    width: 100px;
    margin-left: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px;
}
.currency {
    position: relative;
    left: -20px
}

enter image description here

Play around with the left value on the currency style to get your desired position.

Upvotes: 1

Related Questions