I have a form field that expects a percentage as input, but I want to visually indicate to the user that they should enter a percent value.
The challenge I face is that I want the percentage symbol to appear before the number in the input box, like this: 100% or 10000%, without actually being part of the input value.
Is there a way to achieve this? I've experimented with CSS options, but so far I haven't been able to get the percentage symbol to align with the input value dynamically. It always stays at the end of the input field instead of adjusting its position based on the input length.
The input component code looks like this:
class Input extends Component {
constructor(props) {
super(props);
this.state = {
isActive: false,
}
}
render() {
return (
<div>
<input
value={this.props.value} >
</input>
</div>
)
}
}
CSS snippet:
div {
input:after {
content: '%';
position: absolute;
top: 3.4rem;
z-index: 9999;
color: blue;
font-size: 2rem;
}
}
This example demonstrates what I'm aiming for - the user should be able to edit the highlighted text while the percentage symbol dynamically adjusts its position based on the input length: