0

I have an input textbox like this but I want to append % at the end of any value that was input into it at the end

<input type="text" digitsOnly/>

So if 50 was put in 50% would display

I tried adding a ::after with content: "%" in the styles but nothing appears at the end of the input. I also tried adding % at the end of my input but it is displaying outside the textbox when I want it to be inside right after the value.

I tried:

<input type="text" digitsOnly/> %
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Bob Schneider
  • 1
  • 1
  • Here you can see that you can't use :after on some input : https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field – OneQ Jan 06 '23 at 23:41
  • How did you use ::after in your styles ? Also do you mind using javascript too ? – Joe S Jan 06 '23 at 23:43
  • Trying to place directly into the input is not great, doing the way you tried is the way to go, you can just render the input & the % to look like one input. Like how bootstrap does it with input groups -> https://getbootstrap.com/docs/5.3/forms/input-group/ – Keith Jan 06 '23 at 23:46
  • Another idea, a bit like bootstraps input groups, is to give the input a padding-right, and then absolute position a % symbol inside the input. – Keith Jan 06 '23 at 23:59

1 Answers1

0

You can place the % next to the input and style the elements to look like a single box:

/* Remove the border on the input */
.box input { border:none; }

.box { border:1px solid grey; padding:1px; }
<span class="box">
  <input type="text" digitsOnly/>%
</span>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71