CODEWITHSUNDEEP
htmlcss
Joel Peltonen
Joel Peltonen

Reputation: 13432

How can I add space to a right-aligned <input> element between cusror/caret and text?

I have an input and when a user enters a value like 5,1 the text and the cursor/caret are uncomfortable close depending on the font:

Rendered example of this happening

Example code to play around with below. Experiment with your own fonts to find a similar one as I can't share the one in the image.

<input
  type="text"
  style="text-align: right; font-family: 'SuperSecret';"
  value="5.1"
/>

How can I separate the two a bit? I don't want to alter the data in any way, so JS solutions/hacks like adding a whitespace character to the end of the sentence are not preferred.

Edit: As discussed in the comments of the accepted answer, it's actually not possible to do this with CSS.

Upvotes: 1

Views: 776

Answers (1)

0stone0
0stone0

Reputation: 44264

Use letter-spacing

input {
    letter-spacing: 10px;
}
<input
  type="text"
  style="text-align: right; font-family: 'SuperSecret';"
  value="5.1"
/>

As described in the comments by @zgood, using padding-right will add some space between the last most character and the right side of the input field;

input {
    padding-right: 20px;
}
<input
  type="text"
  style="text-align: right; font-family: 'SuperSecret';"
  value="5.1"
/>

Upvotes: 2

Related Questions