Question

I have inputs whose validates with a green tic or red cross placed at the very right of the input (inside the input).

If I write lot of text the pic overlapps with the text. Is there a way to specify the writing space of an input without restricting the characters that can be entered? To prevent the text that user enters to reach the pic inside the input?

I feel like the explanation is not very clear so I’ll try to make an example:

This should be an input:

|______________________|

The validation pic is shown here:

|___________________ x |

I want to be able to write in the input until the ::

|_________________ : __|

Answer 1

Set it as padding-right:

padding-right: 1.4em; /* However wide your image is, plus some extra padding */

That should work, whether it’s a background-image or some other element overlaid on the textbox.