Chcę dodać symbol „€” po prawej stronie pola wejściowego, widziałem kilka przykładów online, ale niestety nie działają, ponieważ mam już etykietę dla moich danych wejściowych. Czy można to zrobić za pomocą ...

0
Cyborg29 26 czerwiec 2021, 17:55

4 odpowiedzi

Najlepsza odpowiedź

Sprawdź, czy poniższe działa dla Ciebie...

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

Pobaw się wartością left w stylu currency, aby uzyskać pożądaną pozycję.

1
Simon K 26 czerwiec 2021, 15:01

Użyłbym pseudoelementu, głównie dlatego, że możesz wtedy ustawić atrybut danych za pomocą javascript, jeśli kiedykolwiek będziesz musiał zmienić walutę w przyszłości.

Wejścia nie mają pseudo-elementów, więc musiałem owinąć dane wejściowe w span. Wtedy mogę użyć position: absolute w połączeniu z transform: translate, aby umieścić € tam, gdzie chciałem.

.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>
5
Rickard Elimää 27 czerwiec 2021, 07:30

Najszybszym i najprostszym sposobem jest dodanie znaku waluty przed/po tagu wejściowym, takim jak:

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

Jeśli chcesz stylizować znak waluty, możesz umieścić go w tagu span:

 <input id="idExample" class="currency" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required><span class="euroClass">&euro;</span>
1
Ali Safari 26 czerwiec 2021, 15:18

Wypróbuj to:

<input placeholder="Type something">
<span>&#8352</span>
0
Lamphrangmi Lamin 26 czerwiec 2021, 15:34