CSS cursor line size when entering an Input field

Question

I have an image as the background for an input field. I can set the line-height and font-size easily but when you click inside the input, the cursor line is way outside the background image.

Is there a CSS statement (Is that you call them?) that controls this?

Answer 1

Yes, line-height.

Try:

input {height: 28px; font-size: 10px; padding: 7px 5px;}

Answer 2

You're probably using line-height to display the text in the input as vertically centered. However, it is also the culprit of your issue. Try experimenting with padding settings of the input instead, while leaving the line-height set to normal.

Answer 3

The post http://stackoverflow.com/questions/1211078/vertically-aligning-the-text-cursor-caret-in-an-input-box-with-jquery-javascr may help you.

It seems that your padding size affects the cursor size and position.

Answer 4

Will be good if we have the code , you also can try

background:url("yourimage") right top no-repeat;
font-size:12px;
padding:5px 5px;
line-height:normal;

depends of your images size