How to make placeholder text permanent and space between
I'm trying to make a text input like this where I have permanent text on the right and the replaceable text on the left
any idea?
Solution 1:
Try something like this. You can also target the elements with class names. I have added some width and padding to input. Change it as per your requirements.
label {
position: relative;
}
label span {
position: absolute;
right: 0;
top: 0;
padding-right: 10px;
color: grey
}
input {
padding-right: 40px;
width: 150px;
}<label><span>bhat</span>
<input type="text" placeholder="0.00" />
</label>Solution 2:
Achieved using position absolute span to the textbox.
.input-with-txt {
position: relative;
display: inline-block;
}
input {
padding: 10px;
padding-right: 45px;
}
.input-with-txt > span {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #aaa;
}<div class="input-with-txt">
<input type="text" placeholder="0.00" />
<span>baht</span>
</div>